使用 react 和 webpack 添加图像时出错

Question

I am building a small react app usind webpack 3.x and when I try to show my local images these ones are not load. I get the error: Module not found: Error: Can´t resolve '/images/williamshakespeare.jpg'.

This is my React component:

import * as React from 'react';

export const Quiz = (props) => {
    return (
        <div className='row'>
            <div className='col-md-4'>
                <img src={require('/images/williamshakespeare.jpg')}/>
            </div>
        </div>
    );
}

This is my webpack.config.js. I have installed url-loader and file-loder.

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = __dirname;

module.exports = {
    context: path.join(basePath, "src"),
    resolve: {
        extensions: ['.js', '.jsx']
    },
    // The entry point for the bundle.
    entry: {
        // App entry point.
        app: './main.jsx',
        appStyles: [
            './css/style.css',
        ],
        vendor: [
            "react",
            "react-dom"
        ],
        vendorStyle: [
            '../node_modules/bootstrap/dist/css/bootstrap.css',
            '../node_modules/font-awesome/css/font-awesome.css',
        ],
    },
    output: {
        path: path.join(basePath, "dist"),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // The Condition must match
                exclude: /node_modules/, // The Condition must NOT match
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: {
                    loader: 'css-loader',
                  },
                }),
            },
            // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
            // Using here url-loader and file-loader
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=5000',
            },
        ],
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist', // Content base
        inline: true, // Enable watch and live reload
        host: 'localhost',
        port: 8081,
        stats: 'errors-only' // To show only errors in your bundle
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', // Name of file in ./dist/
            template: 'index.html', // Name of template in ./src
            hash: true // Append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting.
        }),
        new ExtractTextPlugin({
            filename: '[chunkhash].[name].css',
            disable: false,
            allChunks: true,
        }),
    ]
};

And this is my folders structure:

Answer 1

Well, my fault, the correct path is

<img src={require('./images/williamshakespeare.jpg')}/>

instead of

<img src={require('/images/williamshakespeare.jpg')}/>