vue种render函数动态加载img的src路径

分享一下我去如何解决vue render 中 如何正确配置img的src 路径?

一、我的项目中有俩层组件,

       第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件

二、render函数中需要创建<img>标签,img中的src是父组件传进来的;

       src正确传进来,图片却不不显示。

三、解决办法:

        首先在父组件中将图片import进来,

import empty from "./img/empty.png";

        在父组件的data中声明一个变量,将empty图片引入进来

empty:  empty,

       父组件把图片传给子组件,子组件为

<index-grid :empty="empty"></index-grid>

      子组件在props中接收empty

props: {
    empty: {
      type: String
    }
  },

子组件可以直接使用src

img.push(
        h("img", {
          style: {
            verticalAlign: "middle"
          },
          attrs: {
            src: empty
          }
        })
      );

欢迎关注我的个人技术公众号!javascript艺术

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值