关于Vue中img动态拼接src图片地址的问题
更新时间：2021年10月13日 14:23:03 作者：H@Z*rTE|i
这篇文章主要介绍了关于Vue中img动态拼接src图片地址的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
下面看下Vue中img动态拼接:src图片地址，具体内容如下所示：
使用场景：根据后端返回图片标记来匹配本地图片资源
例如：根据后端返回k1标记，前端生成assets/images/inventory/k1.png图片资源路径
<template>
<div class="fl">
<img :src="getImgUrl(gatherInfo.img1)" alt="">
<img :src="getImgUrl(gatherInfo.img2)" alt="">
<img :src="getImgUrl(gatherInfo.img3)" alt="">
</div>
</template>
data(){
return{
gatherInfo: {
title: '库存汇总信息',
img1: 'k1',
img2: 'k2',
img3: 'k3',
},
}
}
methods里面
//获取图片地址
getImgUrl (img) {
return require("@/assets/images/inventory/" + img+ ".png");
},
到此这篇关于Vue中img动态拼接:src图片地址的文章就介绍到这了,更多相关vue img动态拼接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue 在移动端体验上的优化解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue组件开发props验证的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
vue3使用element-plus再次封装table组件的基本步骤
这篇文章主要介绍了vue3使用element-plus再次封装table组件的基本步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要为大家详细介绍了vue3.0实现考勤日历组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下2023-03-03
在使用 element ui 组件过程中，我最近碰到了新的问题，vue--elementui中如何修改el-input样式呢，今天小编通过示例代码给大家详细讲解，需要的朋友参考下吧2023-05-05
这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论