其他分享
首页 > 其他分享> > vue中设置背景图片的方式

vue中设置背景图片的方式

作者:互联网

第一种:是用前端的静态图片做背景:

只需要在外层div中加入

 <div :style="conTop"> <div> 

这个style的内容写在data中

data() {
    return {
        conTop: {
            backgroundImage:'url(' + require('./images/xxx..jpg') + ')',
            backgroundRepeat:'no-repeat',
            backgroundSize: cover;<!-- 响应式 -->
    }

}

 

一定是要加require包裹路径

第二种:是用url来插入图片(pic为一个包含url的对象)

  let pic = { url : 'xxx.xxx.xx' }// 绝对路径  

直接就是

 backgroundImage :'url(' + pic.url +')'; 

标签:vue,url,require,xxx,pic,backgroundImage,设置,data,背景图片
来源: https://www.cnblogs.com/sinceForever/p/12744583.html