webpack 无法加载图片答案

【问题标题】：webpack cannot load imagewebpack 无法加载图片
【发布时间】：2017-01-18 23:12:23
【问题描述】：

我正在使用 React + Material-ui 创建移动应用程序并使用 webpack 创建捆绑包以将其包含在 index.html 中。我导入图像并在反应中使用它但图像未加载，此错误出现在控制台中：

加载资源失败：net::ERR_FILE_NOT_FOUND

webpack 配置；

module.exports = {
    entry: {
        index: path.join(__dirname, 'www', 'js', 'routing.jsx')
    },
    output: {
        path: BUILD_DIR,
        filename: filename,
        library: '[name]',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        publicPath: "/www/js/bundle/"
    },
    node: {fs: "empty"},
    plugins: [],
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }, {
                test: /\.json$/,
                loader: "json-loader"
            }, {
                test: /\.(png|gif|jpg|jpeg|svg|otf|ttf|eot|woff)$/,
                loader: 'file-loader'
            }
        ],
        noParse: [/dist\/ol\.js/, /dist\/jspdf.debug\.js/]
    }
};

图片导入和使用：

import img from '../img/thumbnail .png'
<img src={map.thumbnail_url} onError={(e) => {
                                    e.target.src = {img}
                                }}/>

截图：

【问题讨论】：

在他们使用它的文档中：var url = require("file-loader!./file.png");，也许 file-loader! 部分是必需的。
您的问题有两个部分。首先尝试设置<img src={img} /> 而不是在错误中，以检查图像是否实际加载。如果它显示正确的图像，那么问题是设置 e.target.src = {img} 我认为这可能是问题
图片未加载，但出现在输出文件夹@jssridhar
@Hosar 不工作

标签： cordova reactjs webpack

【解决方案1】：

您的导入语句import img from '../img/thumbnail .png'，文件扩展名前有一个空格。试试import img from '../img/thumbnail.png'

【讨论】：

这是正确的文件名，但是我更改了名称，但出现了同样的错误