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")
    }    
]

总结

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

您可能感兴趣的文章:

Avue自定义formslot调用rules自定义规则方式
在Avue框架中,使用formslot自定义表格列时可能会遇到无法调用Avue的自定义校验规则的问题,这通常发生在尝试通过formslot自定义设置列的场景中,解决这一问题的一个有效方法是将自定义列与Avue的校验规则通过特定方式连接起来
2024-10-10
vue3的基本使用方法详细教程
这篇文章主要介绍了vue3的基本使用方法,结合实例形式详细分析了vue3功能、组件、生命周期、TypeScript结合运用等相关概念与使用方法,需要的朋友可以参考下
2023-06-06
vue3中markRaw示例详解
markRaw是将一个对象标记为普通对象,而toRaw是将reactive对象变为普通对象,在 Vue 3 中,markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数,下面给大家介绍vue3中markRaw详解,感兴趣的朋友一起看看吧
2024-04-04
Vue项目打包部署到apache服务器的方法步骤
这篇文章主要介绍了Vue项目打包部署到apache服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
Vue封装的组件全局注册并引用
这篇文章主要为大家详细介绍了Vue封装的组件全局注册并引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
Vue3.x项目开发的一些常用知识点总结
目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Vue Router中应用中间件的方法
这篇文章主要介绍了Vue Router中应用中间件的方法，文中讲解非常细致，帮助大家更好的理解和学习vue router,感兴趣的朋友可以了解下
2020-08-08
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
这篇文章主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题，需要的朋友可以参考下
2018-04-04
vue addRoutes实现动态权限路由菜单的示例
本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05