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',
      },
    }
}
//获取图片地址
    getImgUrl (img) {
      return require("@/assets/images/inventory/" + img+ ".png");
    },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • # 一、框架概述 # 课程概述 1. laravel 4天(之前TP框架还是很大的区别)(国外框架) 2. 在线教...
    关进一阅读 3,146评论 0 0
  • 项目目标: 1)熟练掌握ajax的使用 (*****) 2)熟悉前后端数据交互(***) 3)熟悉elementu...
    1462a2c022bc阅读 3,297评论 0 0
  • # 一度蜜v3.0协议 --- # 交互协议 [TOC] ## 协议说明 ### 请求参数 下表列出了v3.0版协...
    c5e350bc5b40阅读 3,945评论 0 0
  • 1:html中常见的有3种布局方式: 1:文档流布局(电脑默认的布局方式) 2:浮动布局 3:定位 文档流布...
    回忆丶阑珊阅读 3,596评论 0 4
  • 1 偷里见君几回身,越发不敢轻出门。 小心翼翼巧装扮,生怕坐失梦里人。 ...
    大漠起狼烟阅读 5,596评论 20 86

友情链接更多精彩内容