• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

关于Vue中img动态拼接src图片地址的问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

下面看下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动态拼接内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS实现简单计数器发布时间:2022-02-05
下一篇:
小程序中如何绘制思维导图详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap