vue中使用相对路径图片不显示

因为webpack问题，webpack打包会将静态资源放在一个webpack创建的Img文件夹中，并且图片名字还会被更改

我的文件目录是没有Img文件夹的，且图片名字没有那串乱字符

1. 路径问题:

   • 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 开始的路径。

2. 资源处理配置:

   • Vue CLI 默认配置下，静态资源的路径通常需要使用 require 或 import 语句来正确处理。直接使用字符串路径可能导致路径解析错误。

   解决方法：

   • 使用 require 语法确保图片路径正确：

     javascript
     data: function () { return { bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')] } } 这样可以确保 webpack 能够正确处理图片路径。

3. 图片加载问题:

   • 如果图片文件存在，但路径不正确，可能会导致图片无法加载。确保路径是正确的，并且图片文件确实在项目的 src/assets 目录或相对位置中。

4. 缓存问题:

   • 有时浏览器缓存可能会导致图片无法正确加载。可以尝试清除浏览器缓存或在路径后添加查询字符串来强制刷新：

     <img :src="bannerImg[0] + '?v=1'" alt="" style="width: 1200px;">