如何在 webpack 中使用 <img src>？

Question

当我尝试加载图像时

<img class="brand" alt="Brand" width="50%" height="50%" src="/logo.jpg">

它产生以下错误：

logo.jpg:1 GET http://localhost:8080/logo.jpg 404（未找到）

webpack.config.js :

module: {   
    loaders: [
        {
            test: /\.html$/,
            exclude: /index\.html$/,
            loader: 'html-loader?root=./assets/images&interpolate&name=./views/[name].[ext]'
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=10000&name=./assets/images/[name].[ext]'
        }
    ]
}

Answer 1

您必须import/require在entry js文件中添加图像，该图像将被处理并添加到您的output目录中，并且该Logo变量将在处理后包含该图像的 url

import Logo from './logo.jpg';

另一种方法是html-loader在您的entry js文件中使用和导入它。然后你可以src像在 html 中一样使用通常的属性。