网页包。图片加载失败答案

【问题标题】：Webpack. Image loading failed网页包。图片加载失败
【发布时间】：2021-07-14 20:36:13
【问题描述】：

第一次使用 webpack。无法在其中加载图像。尝试了很多方法来修复它，但是... 我通过 img src 将我的图像包含在 html 中。我也在 index.js 中做了导入：

    import backGround from '../img/bg.jpg';
    const bgImg = document.getElementById('bg');
    bgImg.src = backGround;

所以我得到了这种错误： ./src/img/bg.jpg 1:0 中的错误模块解析失败：意外字符 '�' (1:0) 你可能需要一个合适的加载器来处理这个文件类型

我也可以给你看我的配置：

    {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      'file-loader'
    ],
  },

【问题讨论】：

标签： javascript webpack webpack-file-loader

【解决方案1】：

兄弟，你需要使用 url-loader 文件加载器用于 html 文件和东西

 // "url" loader works like "file" loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: imageInlineSizeLimit,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
…..
// More loaders
…..

            {
              loader: require.resolve("file-loader"),

              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: "static/media/[name].[hash:8].[ext]",
              },
            },

确保将文件加载器放在最后

【讨论】：

我得到 ReferenceError: imageInlineSizeLimit is not defined
那个给你设置，是个变量
你可以删掉，换成1000
哇，没有错误...但我希望这些图像出现在 dist 文件夹中...有可能吗？
哦，抱歉还是不行……我只是忘了取消注释有问题的代码