vue中render函数中img的src直接加载路径无效

问题:vue中render函数中img的src直接加载路径无效

解决:

js代码:

第一种方案:通过js引入

<script>
//1、引进来
import img1 from "../../../assets/images/u52.png";
export default {
  name: "Orgstru",
  data() {
    return {
      columns7: [
        {
          title: "模板编号",
          key: "id",
          align: "center"
        }
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style: {
                    width: "32%",
                    marginRight: "2%",
                    display: "inline-block",
                    color: "#1abc9c"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                [
                  h("img", {
                    attrs: {
                      //2、使用
                      src: img1
                    },
                    style: {
                      width: "17px",
                      verticalAlign: "middle"
                    }
                  }),
                  "查看"
                ]
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {}
};
</script>

第二种方案:使用base64字符串引用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值