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

【问题标题】：How to use <img src> in webpack?如何在 webpack 中使用 <img src>？
【发布时间】：2018-04-07 21:21:51
【问题描述】：

当我尝试加载图片时

<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]'
        }
    ]
}

【问题讨论】：

Webpack: Loading images from html templates的可能重复

标签： webpack

【解决方案1】：

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

import Logo from './logo.jpg';

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

【讨论】：