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中CSS动画原理的实现
这篇文章主要介绍了Vue中CSS动画原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
vue在mounted中window.onresize不生效问题及解决
这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue的mixin策略
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-11-11
搭建element-ui的Vue前端工程操作实例
下面小编就为大家分享一篇搭建element-ui的Vue前端工程操作实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue 微信分享回调iOS和安卓回调出现错误的解决
这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中使用typescript配置步骤
本文主要介绍了vue中使用typescript配置，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
在vue项目中引入高德地图及其UI组件的方法
今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3超出文本展示el tooltip实现示例
这篇文章主要为大家介绍了vue3超出文本展示el tooltip实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue中使用codemirror的实例详解
这篇文章主要介绍了vue中使用codemirror的实例教程，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-11-11
vue实现商品加减计算总价的实例代码
这篇文章主要介绍了vue实现商品加减计算总价的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08