Webpack:图像无法加载 [英] Webpack: Images wont load

问题描述

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

I am using Webpack for the first time and my images wont load...404 error. It seems that the images are not getting to my dist folder. If I manually insert the image files into the dist folder, then they will display. My understanding is that Webpack generates everything in the dist folder when you run it. This leads me to believe that the issue in my module rules.

这是我的图片标签:

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

来自我的 config.js:

And from my 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 文件夹添加到这样的路径中:

I tried adding the dist folder to the path like this:

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

但这没有帮助.我还应该看什么?

but that didn't help. What else should I be looking at?

推荐答案

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

Your images are not getting copied to the dist directory, because webpack doesn't process them at all, so your file-loader is not applied to it. In your image tag, you used:

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

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

Assuming that you are using EJS as the template engine, that would be equivalent to src=images/tech-town-showcase-students.JPG. Webpack doesn't process it as a module, because that's a regular string and it is not treated as an import.

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

You need to import it, so that webpack will apply the loaders you have configured for that file. You already have parentheses around the string, so it might be possible that you've copied it from somewhere and forgot to include the require.

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

这篇关于Webpack:图像无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！