Webpack：图像不会加载答案

【问题标题】：Webpack: Images wont loadWebpack：图像不会加载
【发布时间】：2017-11-11 11:34:26
【问题描述】：

我是第一次使用 Webpack，我的图片无法加载...404 错误。似乎图像没有进入我的 dist 文件夹。如果我手动将图像文件插入到 dist 文件夹中，它们就会显示出来。我的理解是，当你运行 Webpack 时，它会在 dist 文件夹中生成所有内容。这使我相信我的模块规则中的问题。

这是我的图片标签：

  <img class="img-responsive" src=<%=('images/tech-town-showcase-students.JPG') %> alt="students meeting with tech business owner"/>

并且来自我的 config.js：

module: {
    rules: [
        {
          test: /\.scss$/,
          use: cssConfig
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
              'file-loader?name=images/[name].[ext]',
              'image-webpack-loader'
            ]
        },

我尝试将 dist 文件夹添加到这样的路径：

'file-loader?name=dist/images/[name].[ext]',

但这并没有帮助。我还应该看什么？

【问题讨论】：

标签： webpack

【解决方案1】：

你的图片没有被复制到 dist 目录，因为 webpack 根本不处理它们，所以你的 file-loader 没有应用到它。在您的图像标签中，您使用了：

src=<%=('images/tech-town-showcase-students.JPG') %>

假设您使用 EJS 作为模板引擎，则相当于 src=images/tech-town-showcase-students.JPG。 Webpack 不会将其作为模块处理，因为这是一个常规字符串，不会被视为导入。

您需要导入它，以便 webpack 应用您为该文件配置的加载器。您已经在字符串周围加上了括号，因此您可能从某个地方复制了它而忘记包含 require。

src="<%= require('./images/tech-town-showcase-students.JPG') %>"

【讨论】：

哇。 'require' 是一个很大的细节遗漏了！随着对文件路径的调整，我的图像现在加载了。

【解决方案2】：

我们可以使用 webpack 中的 url-loader 将我们的图片资源与我们的包捆绑在一起。

使用 npm 安装 url-loader

npm install url-loader --save-dev

在 webpack.config.js 中配置规则

 module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              encoding: false,
            },
          },
        ],
      },
    ],
  },

打包后，我们可以根据我们的 url-loader 配置找到图片来源

【讨论】：