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自定义组件@click点击失效问题及解决
这篇文章主要介绍了vue自定义组件@click点击失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue table新增、编辑解读
这篇文章主要介绍了Vue table新增、编辑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
详细讲一讲vue3下会造成响应式丢失的情况
vue3开发过程中,绑定的响应式数据失去了响应式,如何解决问题呢,下面这篇文章主要给大家介绍了关于vue3下会造成响应式丢失的情况,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue调试工具vue-devtools安装及使用方法
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-11-11
vue修改数据视图更新原理学习
这篇文章主要为大家介绍了vue修改数据视图更新原理学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-11-11
vue3.0使用taro-ui-vue3引入组件不生效的问题及解决
这篇文章主要介绍了vue3.0使用taro-ui-vue3引入组件不生效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
如何使用vuejs实现更好的Form validation?
如何使用vuejs实现更好的Form validation？这篇文章主要介绍了vue-form插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
解决在vue项目中webpack打包后字体不生效的问题
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3+ts封装axios实例以及解决跨域问题
在前端开发中,使用axios进行数据请求是常见的做法,封装axios可以统一请求头处理、方便接口管理、配置多拦截器等,提高代码的可维护性和重用性,本文详细记录了axios的封装过程,包括安装、配置跨域处理、接口管理文件的创建等
2024-09-09
如何为老vue项目添加vite支持详解
Vite是一个开发环境工具，旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下
2021-09-09