javascript - 无法在 react.js 中使用本地镜像

Question

基本上我无法使用本地镜像，我真的不确定为什么。我已经安装了 url-loader 和 file-loader 并尝试请求该文件。

HeaderNavigation.js(我尝试使用的图像位于同一目录中，并被引用为品牌图像)。

/**
 * Created by Hewlbern on 17-Jan-17.
 */
import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

//import NavLink from "./Navlink"

export default React.createClass ({
    render() {
        /* <img src={require('./Example.png')} /> */
       // var Replace = "http://cdn.playbuzz.com/cdn/08421690-8191-4264-b479-ce42341e2389/be95b1c7-c95d-41c2-ae7d-1713e67462f3.jpg";
        return (
            <div>
                <Navbar collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <LinkContainer to ="/">
                                <img src = {require('./Example.png')}/>
                            </LinkContainer>
                        </Navbar.Brand>
                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav bsStyle = "tabs" >
                            <LinkContainer to ="/Product">
                                <NavItem eventKey = "{1}" >
                                        Product
                                </NavItem>
                            </LinkContainer>
                            <LinkContainer to ="/About">
                                <NavItem eventKey = "{2}">
                                        About
                                </NavItem>
                            </LinkContainer>
                            <NavDropdown id="nav-dropdown" title  ="More" eventKey = "{3}" pullRight>
                                <LinkContainer to ="/Background">
                                    <MenuItem eventKey = "{1}">
                                            Background
                                    </MenuItem>
                                </LinkContainer>
                                <LinkContainer to ="/Contact Us">
                                    <MenuItem eventKey = "{2}">
                                            Contact Us
                                    </MenuItem>
                                </LinkContainer>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        );
    }
});

这是我的 webpack 文件。

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
    entry: DEV + "/App.js",
    output: {
        path: OUTPUT,
        filename: "myCode.js"
    },
module: {
    loaders: [
        // js
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel'],
            presets: ['es2015', 'react'],
            include: DEV,
        },
        //    PNG
        {
            test: /\.(gif|jpe?g|png|ico)$/,
            loader: 'url-loader?limit=10000'
        },

        {
            test: /\.(png|jpg)$/,
            loader: 'file-loader'
        },

        // CSS
        {
            test: /\.scss$/,
            include: path.join(__dirname, 'client'),
            loader: 'style-loader!css-loader!sass-loader'
        },
    ]
  }
};

module.exports = config;

Answer 1

如果你想加载带有本地相对 URL 的图片。 React 项目有一个默认的 public 文件夹。你应该把你的 images 文件夹放在里面。它会起作用。