关于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 通过公共字段,拼接两个对象数组的实例
• Vue 中对图片地址进行拼接的方法
• vue 标签属性数据绑定和拼接的实现方法
• vue语法之拼接字符串的示例代码
• vue中如何实现变量和字符串拼接

本文由 华域联盟 原创撰写：华域联盟 » 关于Vue中img动态拼接src图片地址的问题

转载请保留出处和原文链接：https://www.cnhackhy.com/83224.htm