Question

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

无法加载资源：net :: ERR_FILE_NOT_FOUND

webpack config;

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}
                                }}/>

srceenshot：

Answer 1

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

webpack无法加载图片

1 个答案: