纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

H@Z*rTE|i   2021-10-13 我要评论
想了解关于Vue中img动态拼接src图片地址的问题的相关内容吗,H@Z*rTE|i在本文为您仔细讲解vue img动态拼接的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,img动态拼接,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");
    },

相关文章

猜您喜欢

  • steam加密爬虫逆向RSA登录 python爬虫实战steam加密逆向RSA登录解析

    想了解python爬虫实战steam加密逆向RSA登录解析的相关内容吗,五包辣条!在本文为您仔细讲解steam加密爬虫逆向RSA登录的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python爬虫实战,steam加密利用Python逆向RSA登录,下面大家一起来学习吧。..
  • vue uniapp分段器效果 vue uniapp实现分段器效果

    想了解vue uniapp实现分段器效果的相关内容吗,不争亦不屑在本文为您仔细讲解vue uniapp分段器效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,uniapp,分段器,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freemmogames.net 【漫漫下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式