美文网首页
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图片地址

    使用场景:根据后端返回图片标记来匹配本地图片资源例如:根据后端返回k1标记,前端生成assets/images/i...

  • 21.Vue img图片路径处理

    在Vue中开发,展示图片是经常使用到的,如果数据是从后台返回的,需要动态绑定到img的src中,在vue中直接拼接...

  • vue之img标签:src地址拼接

    备注:后台返回图片的相对路径,需拼接网络地址前缀http://yang.liy.com.cn:8080/

  • vue img :src动态绑定问题

    vue img元素 :src动态绑定,本地测试没有问题,但是部署后发现动态src图片无法访问。源代码: 解决方法:...

  • Vue v-bind 动态绑定属性、class、style

    data数据 一、动态绑定属性1、 img标签的src属性 imageUrl 是图片的动态地址 语法糖写法 可...

  • Vue中img动态绑定图片的地址

    在vue中绑定图片的地址需要用v-bind方式绑定 import routePath from "../route...

  • 懒加载

    图片懒加载 实现原理 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img...

  • Web图片延迟加载的思路

    替换img元素的图片地址放入data-src,src中只放入默认图片。 当网页滑动时,需要判断图片元素是否在可见区...

  • vue img标签src使用网络地址展示图片无法显示

    开发时模拟数据时使用了网络图片,vue img标签src使用网络地址展示图片无法显示,情况如图: 图片的请求出现4...

  • 懒加载的原理

    原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比...

网友评论

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

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