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

拉玛干2024-09-08 16:54

因为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 CLI 默认配置下，静态资源的路径通常需要使用 require 或 import 语句来正确处理。直接使用字符串路径可能导致路径解析错误。
解决方法：
- 使用 require 语法确保图片路径正确：
  复制代码
  javascript
  data: function () { return { bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')] } } 这样可以确保 webpack 能够正确处理图片路径。
图片加载问题:
- 如果图片文件存在，但路径不正确，可能会导致图片无法加载。确保路径是正确的，并且图片文件确实在项目的 src/assets 目录或相对位置中。
缓存问题:
- 有时浏览器缓存可能会导致图片无法正确加载。可以尝试清除浏览器缓存或在路径后添加查询字符串来强制刷新：
  复制代码
  <img :src="bannerImg[0] + '?v=1'" alt="" style="width: 1200px;">