Webpack 常见问题解答：如何解决图片加载失败的问题

Webpack 常见问题解答：如何解决图片加载失败的问题

在前端开发中，我们经常要使用图片来呈现网站的内容。而使用Webpack打包后，有时候会出现图片加载失败的问题，这时候我们该怎么解决呢？本文将详细介绍一下这个问题，并提供解决方法。

问题分析

首先，我们需要了解为什么会出现图片加载失败的情况。这主要是因为Webpack打包后，图片的路径发生了变化，导致浏览器找不到该路径。举个例子，比如我们有一张图片的路径是 src/assets/img/picture.png，在使用Webpack打包后，图片的路径会变为 dist/assets/img/picture.png。

解决方案

那么，如何解决图片加载失败的问题呢？下面我们提供两种解决方法。

方法一：使用绝对路径

我们可以使用绝对路径来解决图片加载失败的问题。在Webpack中，我们可以使用 file-loader和 url-loader这两个loader来解决。具体的配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[hash:7].[ext]',
              outputPath: 'assets/img'
            }
          }
        ]
      }
    ]
  }
}

在使用url-loader时，我们可以配置 outputPath选项来指定输出的路径。这样在打包后，图片的绝对路径就可以被正确地引用了。

方法二：使用相对路径

我们也可以使用相对路径来解决图片加载失败的问题。具体的配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              useRelativePath: true,
              outputPath: 'assets/img'
            }
          }
        ]
      }
    ]
  }
}

在使用file-loader时，我们可以配置 useRelativePath选项为true，这样打包后，图片的相对路径就可以被正确地引用了。

总结

以上就是解决Webpack打包后图片加载失败的两种方法。使用绝对路径或者相对路径都可以解决该问题。从学习和指导意义上来说，使用Webpack时，需要了解打包后的文件路径变化，学会使用loader配置文件输出路径。以下是完整的示例代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[hash:7].[ext]',
              outputPath: 'assets/img'
            }
          }
        ]
      }
    ]
  }
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a4d262add4f0e0ffd2aedb