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");
},
如果 接口返回来的值如下
g_se,x_16)