美文网首页web端学习
在vue2中的 background-image 不显示

在vue2中的 background-image 不显示

作者: 晨曦诗雨 | 来源:发表于2018-11-19 14:17 被阅读24次

** 在vue中遇到这样的问题**

<div style="background-image:url('../assets/images/图片.jpg');" >  

这样的设置背景图片不显示

经过研究解决方案看下面:

  • 第一步:
    需要在script中引入图片的路径

    import defaultImg from '../assets/icon/report.png'
    

第二步:
在data里设置

data(){
 return{
    bgImg: {
    backgroundImage: "url(" + defaultImg + ")"
              }
        }
    }

第三步:渲染到页面当中,显示图片的设置

<div :style="bgImg" ></div>

此方式就解决了以上图片显示不出的问题

感谢您可以看到这篇文章,多多鼓励,让我们共同学习不一样的知识,共同进步,加油···

相关文章

网友评论

    本文标题:在vue2中的 background-image 不显示

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