vue项目实现img的src动态赋值

2024-03-04 11:14:43 作者：左直拳

这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目img的src动态赋值

没想到这破东西，居然这么折腾人。

时间紧，长话短说。

一般这个动态赋值，要用require。

而且，这个require里，只能有一个变量，多个变量，有运算，有方法，都不行。

<img
  :src="require(`@/${state.path + photo.name}`)"
  :alt="photo.text"
/>

<img
  :src="require(getPath(photo))"
  :alt="photo.text"
/>

<img
  :src="require(`@/modules/assets/images/home/temp/${photo.name}`)"
  :alt="photo.text"
/>

方法：字符串URL前加上require

img标签内

<img :src="item.imgUrl" alt="">

imgUrl属性内需要用require

<img :src="item.imgUrl" alt="">

items:[
    {
        imgUrl: require("./1.png")
    },
    {
        imgUrl: require("./2.png")
    }    
]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。