美文网首页
Vue中img动态拼接:src图片地址

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

作者: 回到唐朝做IT | 来源:发表于2020-03-17 19:11 被阅读0次

    使用场景:根据后端返回图片标记来匹配本地图片资源
    例如:根据后端返回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");
        },
    

    相关文章

      网友评论

          本文标题:Vue中img动态拼接:src图片地址

          本文链接:https://www.haomeiwen.com/subject/hqizehtx.html