vue项目实现img的src动态赋值
更新时间:2024年03月04日 11:14:42 作者:左直拳
这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目img的src动态赋值
没想到这破东西,居然这么折腾人。
时间紧,长话短说。
一般这个动态赋值,要用require。
而且,这个require里,只能有一个变量,多个变量,有运算,有方法,都不行。
1、不行
<img :src="require(`@/${state.path + photo.name}`)" :alt="photo.text" />
2、不行
<img :src="require(getPath(photo))" :alt="photo.text" />
3、可以
<img :src="require(`@/modules/assets/images/home/temp/${photo.name}`)" :alt="photo.text" />
vue动态绑定img的src属性
方法:字符串URL前加上require
具体步骤
img标签内
<img :src="item.imgUrl" alt="">
imgUrl属性内需要用require
<img :src="item.imgUrl" alt="">
items:[ { imgUrl: require("./1.png") }, { imgUrl: require("./2.png") } ]
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04vue结合el-table实现表格行拖拽排序(基于sortablejs)
这篇文章主要介绍了vue结合el-table实现表格行拖拽排序(基于sortablejs),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01Vue之el-select结合v-if动态控制template显示隐藏方式
这篇文章主要介绍了Vue之el-select结合v-if动态控制template显示隐藏方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04
最新评论