webpack - 如何在 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 (Not Found)

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 中。