因为webpack问题,webpack打包会将静态资源放在一个webpack创建的Img文件夹中,并且图片名字还会被更改
我的文件目录是没有Img文件夹的,且图片名字没有那串乱字符
-
路径问题:
- Vue 项目通常会将资源文件放在
src/assets
目录下,并通过 webpack 来处理资源路径。 - 在你的代码中,第一张图片
./banner1.jpg
的路径是相对的,而第二张图片的路径是./html/hanjiang/hanjiang/src/assets/banner2.jpg
,这个路径看起来比较复杂,可能不符合项目的文件结构或配置。
解决方法:
- 确保图片
banner2.jpg
确实存在于指定路径中。 - 更改第二张图片的路径为相对
src/assets
的路径。例如,如果banner2.jpg
存在于src/assets
目录下,可以使用require
来引入:javascript
bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')]
使用@/assets
是指从src/assets
开始的路径。
- Vue 项目通常会将资源文件放在
-
资源处理配置:
- Vue CLI 默认配置下,静态资源的路径通常需要使用
require
或import
语句来正确处理。直接使用字符串路径可能导致路径解析错误。
解决方法:
- 使用
require
语法确保图片路径正确:javascript
data: function () { return { bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')] } }
这样可以确保 webpack 能够正确处理图片路径。
- Vue CLI 默认配置下,静态资源的路径通常需要使用
-
图片加载问题:
- 如果图片文件存在,但路径不正确,可能会导致图片无法加载。确保路径是正确的,并且图片文件确实在项目的
src/assets
目录或相对位置中。
- 如果图片文件存在,但路径不正确,可能会导致图片无法加载。确保路径是正确的,并且图片文件确实在项目的
-
缓存问题:
- 有时浏览器缓存可能会导致图片无法正确加载。可以尝试清除浏览器缓存或在路径后添加查询字符串来强制刷新:
<img :src="bannerImg[0] + '?v=1'" alt="" style="width: 1200px;">
- 有时浏览器缓存可能会导致图片无法正确加载。可以尝试清除浏览器缓存或在路径后添加查询字符串来强制刷新: