img标签动态，添加相对路径

最新推荐文章于 2024-08-16 09:59:52 发布

Iam_楠

最新推荐文章于 2024-08-16 09:59:52 发布

阅读量1k

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_56650035/article/details/118877873

版权

在前端项目中，作者遇到了使用相对路径加载一组图片失败的问题。尝试了./、../和/等不同相对路径方式，均未奏效。最终采用在`<div v-for>`中遍历并使用`require()`方法加载图片，成功显示了位于@/assets/images/imgver目录下的多张图片。这种方法在处理动态加载资源时可能更为适用。

摘要由CSDN通过智能技术生成

目前遇到的业务是封装好的组件，需要传一个相对路径的一组图片路径

一、什么是相对路径？

基于当前文件, 其他文件的路径；

写法：

以上三种方法都试过，没有效果，于是用的下面的写法

  <div v-for="(item,index) in img" :key="index">
    <img :src="img[index]" />
  </div>


  data(){
    return{
        img: [
          require("@/assets/images/imgver/ver-1.png"),
          require("@/assets/images/imgver/ver-2.png"),
          require("@/assets/images/imgver/ver-3.png"),
          require("@/assets/images/imgver/ver-4.png"),
          require("@/assets/images/imgver/ver-5.png"),
          require("@/assets/images/imgver/ver-6.png"),
        ],
    }


  }