Vue中img动态拼接:src图片地址

2023-02-17 18:18:15

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");
    },

如果 接口返回来的值如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/d4688edc01ec482b9ed0f3f6c0b93eb3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASEBaKnJURXxp,size_20,color_FFFFFF,t_70,
g_se,x_16)

  • 作者:H@Z*rTE|i
  • 原文链接:https://blog.csdn.net/IT13333/article/details/120707593
    更新时间:2023-02-17 18:18:15