img标签动态添加相对路径地址

本文主要是介绍img标签动态添加相对路径地址，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue 中有两种办法可以动态在html 文件中添加相对路径：

1. 利用import 引入后直接使用

2.在data 中利用 require 引入后使用，如下例子===》

 // html 代码

 <img :src="../../assets/1.jpg">


 //此时图片不能显示， 需要先把图片都引进来
 
 html中:
 <div v-for="(item,index) in list" :key="index">
   <img :src="imageList[index]" />
 </div> 

 // 在data中

 data() {
    return {
        imageList:[
            require('@/assets/1.jpg'),
            require('@/assets/2.jpg'),
            require('@/assets/3.jpg'),
            require('@/assets/4.jpg')
        ]
    }
}

这篇关于img标签动态添加相对路径地址的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！