在使用 Webpack 打包前端项目时，有时会遇到图片不显示的问题。这个问题通常是由于 Webpack 配置不正确或者路径引用有误导致的。本文将介绍如何解决这个问题，并提供示例代码。
问题描述
在使用 Webpack 打包前端项目时，如果图片不显示，通常会出现以下情况：
- 页面上显示的图片是一个空白的小方块，没有图片内容；
- 在浏览器的控制台中，可以看到图片请求的 HTTP 状态码是 404；
- 在本地开发环境中，图片可以正常显示，但是在打包后的生产环境中无法显示。
解决方案
1. 检查 Webpack 配置
首先，我们需要检查 Webpack 配置文件中是否正确配置了图片的加载器。通常情况下，我们使用 file-loader 或者 url-loader 来加载图片。以下是一个简单的 Webpack 配置文件示例：
// javascriptcn.com 代码示例
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[hash:8].[ext]'
}
}
]
}
]
}
}在上面的配置文件中，我们使用 url-loader 加载图片，并指定了图片的输出路径和文件名。其中，limit 参数表示图片大小小于 8KB 时，将图片转换成 Base64 编码，以减少 HTTP 请求次数。
如果你使用的是 file-loader，则需要将 url-loader 替换成 file-loader，并将 limit 参数删除。
2. 检查图片路径
如果 Webpack 配置文件没有问题，我们需要检查图片路径是否正确。通常情况下，我们会将图片放在 src/assets/images 目录下，并在 HTML 或者 CSS 中引用图片时使用相对路径。例如，下面是一个 HTML 引用图片的示例：
<img src="./assets/images/logo.png" alt="Logo">
如果你使用的是 Vue 或者 React 等框架，通常需要在组件中引用图片。例如，在 Vue 组件中引用图片的示例：
// javascriptcn.com 代码示例
<template>
<div>
<img :src="logo" alt="Logo">
</div>
</template>
<script>
import logo from '@/assets/images/logo.png'
export default {
data() {
return {
logo
}
}
}
</script>在上面的示例中，我们使用了 @ 符号代替了 src 目录的绝对路径。
3. 检查打包后的文件路径
如果 Webpack 配置文件和图片路径都没有问题，我们需要检查打包后的文件路径是否正确。通常情况下，我们会将打包后的文件放在 dist 目录下。如果你使用的是 Vue 或者 React 等框架，通常需要在打包配置文件中指定打包后文件的输出路径。例如，在 Vue 项目中，我们可以在 vue.config.js 文件中配置输出路径：
module.exports = {
outputDir: 'dist'
}4. 使用绝对路径
如果以上方法都不能解决问题，我们可以尝试使用绝对路径引用图片。在 Vue 或者 React 等框架中，我们可以使用 public 目录来存放静态资源文件。例如，在 Vue 组件中使用绝对路径引用图片的示例：
// javascriptcn.com 代码示例
<template>
<div>
<img :src="logo" alt="Logo">
</div>
</template>
<script>
export default {
data() {
return {
logo: '/public/images/logo.png'
}
}
}
</script>在上面的示例中，我们使用了绝对路径 /public 来引用图片。
总结
在使用 Webpack 打包前端项目时，图片不显示是一个常见的问题。通常情况下，这个问题是由于 Webpack 配置不正确或者路径引用有误导致的。我们可以通过检查 Webpack 配置、路径引用和打包后的文件路径来解决这个问题，并可以尝试使用绝对路径引用图片。通过本文的介绍，希望能够帮助读者解决这个问题，并提高对 Webpack 的认识和使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d0d61d2f5e1655d7d8b6e