Webpack 打包后图片无法显示的解决方法-JavaScript中文网-JavaScript教程资源分享门户

Webpack 打包后图片无法显示的解决方法

对于前端开发人员来说，Webpack 是一个非常重要的工具。它可以将我们的代码和资源打包到一起，方便我们管理和部署。但是，有时候我们在打包后发现一些图片无法正常显示，这是一个比较常见的问题。

在这篇文章中，我们将深入探讨 Webpack 打包后图片无法显示的原因，并提供解决方法和示例代码。

问题原因

在 Webpack 打包过程中，我们通常使用 file-loader 或者 url-loader 来处理图片资源。这两个 loader 的作用其实很相似，都是将我们的图片转换成 base64 或者文件路径的形式。

如果我们使用 file-loader，它会将图片复制到输出目录，并返回图片的路径：

import image from './image.png'; // 返回图片的路径

如果我们使用 url-loader，根据我们设置的 limit，它会将小于 limit 大小的图片转换成 base64 的形式，并返回 base64 字符串，大于 limit 大小的图片转换成文件路径：

import image from './image.png'; // 返回 base64 字符串或者文件路径

这两个 loader 的基本用法其实非常简单，但是在打包后图片无法正常显示时，我们需要考虑一下以下几个因素：

是否正确引用了图片
是否正确配置了 loader

引用图片问题

如果我们在项目中引用图片的路径有误，那么在打包后图片就无法正常显示。

例如，我们的项目结构如下：

src/
  |- image.png
  |- index.js

如果我们这样引用图片：

import image from './src/image.png';

那么在打包后，路径就会变成：

import image from '/src/image.png'; // 绝对路径

如果我们将图片放到 public 目录下，并使用相对路径引用图片：

public/
  |- image.png
src/
  |- index.js

import image from '../public/image.png';

那么在打包后，路径也会变成绝对路径，导致图片无法显示。

正确的做法是通过 webpack 的 resolve.alias 功能来配置一个别名，从而正确引用图片。我们可以在 webpack 配置文件中添加以下配置：

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'public': path.resolve(__dirname, 'public')
    }
  }
}

然后在项目中使用别名来引用图片：

import image from '@/image.png'; // src 目录下的图片
import image from 'public/image.png'; // public 目录下的图片

这样就可以确保在打包后图片路径正确了。

配置 loader 问题

如果我们没有正确配置 loader，那么在打包后图片也会无法正常显示。

我们需要确保以下几点：

已经安装了对应的 loader
已经在 webpack 配置文件中正确配置了 loader

以 file-loader 为例，我们需要在 webpack 配置文件中添加以下 loader：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'images', // 图片输出目录
            }
          }
        ]
      }
    ]
  }
}

这个配置会将所有后缀是 png、jpg、jpeg、gif 的图片经过 file-loader 处理，并将输出到 images 目录下。我们可以使用下面的代码来引用图片：

import image from './image.png'; // 返回图片的路径

如果我们希望使用 url-loader 来处理图片，可以在 webpack 配置文件中添加以下 loader：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 大于 8kb 的文件将转换成文件路径
              name: '[name].[contenthash].[ext]',
              outputPath: 'images', // 图片输出目录
            }
          }
        ]
      }
    ]
  }
}

我们可以使用以下代码来引用图片：

import image from './image.png'; // 返回 base64 字符串或者文件路径

解决方法

如果在打包后图片无法显示，我们可以按照以下步骤来解决：

确认图片路径是否正确
确认 webpack 配置文件中是否正确配置了 loader
如果使用 url-loader，请检查 limit 大小是否设置正确，如果图片超过 limit 大小，是否转换成了文件路径

除此之外，我们还可以通过以下方法来优化图片加载：

使用图片压缩工具压缩图片大小，减少加载时间
使用 WebP 格式的图片，可以更高效地加载图片
使用懒加载，只有当图片需要显示时才加载

示例代码

我们可以使用以下代码来测试图片是否可以正常显示：

// index.js
import image from './image.png';

const img = new Image();
img.src = image;
document.body.appendChild(img);

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'images',
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
}

如果图片可以正常显示，那么我们就成功解决了图片加载问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6b7e6a941bf7134c92a74

Webpack 打包后图片无法显示的解决方法