轻松搞定Webpack中img标签src使用相对路径的方法

Webpack 是目前大部分前端项目打包工具的首选，但在使用过程中还是存在一些问题。我们下面要讲到的就是常见的关于图片路径的问题。在 Webpack 项目中，如果要直接使用 img 的 src 属性来引用图片，由于 Webpack 对 HTML 中图片的相对路径的处理方式的问题，会发现图片无法正常加载。为了解决这个问题，需要对 Webpack 进行一些配置，或者使用 loader 来处理图片。

1. 使用 file-loader

一种简单的方法是使用 file-loader 来处理图片。File-loader 会将图片文件拷贝到输出目录，并返回图片文件的路径。然后，可以在 img 标签的 src 属性中使用这个路径来引用图片。

在 package.json 文件中安装 file-loader：

npm install --save-dev file-loader

在 webpack.config.js 文件中配置 file-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

现在，就可以在 img 标签的 src 属性中使用相对路径来引用图片了。例如：

<img src="./images/image.png" alt="图片">

2. 配置 Webpack

另一种方法是配置 Webpack 来处理图片的相对路径。需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

现在，就可以在 img 标签的 src 属性中使用相对路径来引用图片了。例如：

<img src="./images/image.png" alt="图片">

3. 使用 img-loader

img-loader 是一个专门处理图片的 loader。它可以将图片文件压缩、转换格式，并返回图片文件的路径。然后，可以在 img 标签的 src 属性中使用这个路径来引用图片。

在 package.json 文件中安装 img-loader：

npm install --save-dev img-loader

在 webpack.config.js 文件中配置 img-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'img-loader',
          },
        ],
      },
    ],
  },
};

现在，就可以在 img 标签的 src 属性中使用相对路径来引用图片了。例如：

<img src="./images/image.png" alt="图片">

希望这些方法能够帮助您解决 Webpack 中 img 标签 src 使用相对路径的问题。