下面看下Vue中img动态拼接:src图片地址，具体内容如下所示： 使用场景：根据后端返回图片标记来匹配本地图片资源 例如：根据后端返回k1标记，前端生成assets/images/
下面看下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动态拼接内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: 关于Vue中img动态拼接src图片地址的问题
本文链接: https://www.lsjlt.com/news/154361.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0