vue的element-ui的this.$msgbox放图片不显示出来

Question

相关代码

 open(){
    const h= this.$createElement;
    this.$msgbox({
      title:'',
      showConfirmButton:false,
      message:h('div',null,[
        h('div', { style: 'width:200px;height:192px;background-image:url(../../assets/img/program/tipImg.png)'},'VNode')
      ]),
    })
  },

弹窗截图、游览器中的看到的html、css

Answer 1

1. 图片没加载到。看看有没有404之类的

2. 图片大小有问题。

    background:url(../../assets/img/program/tipImg.png) left top no-repeat';background-size: cover;

Answer 2

找到了一个解决思路。但它是在template中写的，那在this.$msgBox中要怎么写呢？

又找到了一个方法，https://blog.csdn.net/qq_3296...，完美解决

Answer 3

你可以使用require来引入图片，如下

  data() {
    return {
      imgsrc: require('../../assets/img/program/tipImg.png')
    }
  }

然后在需要的用的地方使用imgsrc

 open(){
    const h= this.$createElement;
    this.$msgbox({
      title:'',
      showConfirmButton:false,
      message:h('div',null,[
        h('div', { style: 'width:200px;height:192px;background-image:url(' + this.imgsrc +')'},'VNode')
      ]),
    })
  },