如何在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变量将包含以下网址：处理后的图像

import Logo from './logo.jpg';

另一种方法是使用html-loader并将其导入您的entry js文件中。然后，您可以像使用html一样使用常规的src属性。