webpack图片问题小结

最新推荐文章于 2021-12-03 18:23:17 发布

原创最新推荐文章于 2021-12-03 18:23:17 发布 · 940 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js

Vue2.0 专栏收录该内容

3 篇文章

订阅专栏

本文总结了在Webpack项目中遇到的图片404问题，主要涉及HTML img标签、CSS背景图、JavaScript动态引用及Vue.js的v-bind绑定图片路径。当使用Vue.js动态定义图片路径时，由于file-loader无法探测，导致编译后请求的图片地址错误。解决方案包括使用绝对路径或通过file-loader确保图片被正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然是一个小问题，但是遇到坑的时候依然觉得很烦躁。最常见的问题就是404 not found，比如下面报错

GET http://localhost:8080/user.img 404 (Not Found)

先分析在webpack项目中图片的应用场景：
1. HTML文件中img标签的src属性引用或者内嵌样式引用

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

2 . CSS文件中的背景图等设置

.photo {
    background: url(photo.jpg);
}

3 . JavaScript文件中动态添加或者改变的图片引用

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

4 . 使用v-bind绑定img的src(我当前遇到的问题）
我在template中用：src=”imgSrc” 绑定图片路径，然后在script中定义图片的相对路径，则控制台报错找不到图片。
查找到的原因是：
如果你的图片地址是写死在或者里的，Webpack 会帮你处理这个图片最终的地址（要用到 file-loader）：

<template>
  <img src="./相对地址.jpg">
</template>

Webpack 编译后会变成：

<img src="/绝对地址.jpg">

这种情况图片处理正常。

但如果你用 Vue.js 来定义图片路径：

<template>
  <img :src="src">
</template>
<script>
export default {
  data () { return { src: './相对地址.jpg' } }
}
</script>

那么 file-loader 是无法探测到图片路径的，所以编译之后，你的应用请求的图片地址实际上是：

<img src="./相对地址.jpg">

因为编译后的 index.html 是在根目录下的，所以实际上请求的地址是 /相对地址.jpg，但你的图片地址应该是在 /src/images/相对地址.jpg，所以就会报错。（file-loader 没有探测到你引用了这个图片，所以这个图片甚至都不会出现在你的编译后的文件里面）

所以在是用 Vue.js 动态定义图片路径时，一定要用绝对路径（例如 cdn 路径），或者使用 file-loader 引用你的图片以得到绝对路径：

import yourJPGPath from 'file-loader!./test.jpg'
export default {
  data () { return { src: yourJPGPath } }
}

所以动态引入图片时，只需要这么用：

import xx from '1.img'
import yy from '2.img'
import zz from '3.img'

data () {
return {
url_image: xx
}
}