Vue项目设置背景图片,IOS图片显示不出
在Vue项目开发中,有时候我们要向页面中添加一些背景图片,可是当我们在样式中添加了背景图片,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,列如下面的CSS样式就会出现报错:background:url("../../assets/image/laosiji.jpg");在node中有一种解决这个问题的方式,如下:(1)在template中我们先这样写上:&...
·
在Vue项目开发中,有时候我们要向页面中添加一些背景图片,可是当我们在样式中添加了背景图片,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,列如下面的CSS样式就会出现报错:
background:url("../../assets/image/laosiji.jpg");
在node中有一种解决这个问题的方式,如下:
(1)在template中我们先这样写上:
<div :style="bgImg"/>
(2)我们需要在data中定义:
export default {
name: 'productdetailspage',
data() {
return {
bgImg: {
backgroundImage: "url(" + require("../../assets/save.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "25px auto"
},
}
},
ok ,搞定!!!
可复制拿去用,图片路径自己改改,不客气~
如果遇到android端图片能显示而IOS上不能正常显示图片的话,以下方法也许能帮你解决这个问题, 在你的img标签外包一层div,给div这只图片的宽高尺寸,然后图片样式宽高设置为百分百:
html代码:
<div class="img_wrap">
<img class="my_img" src="**********">
</div>
css样式:
.img_wrap {
width: 100px;
height: 100px;
}
.my_img {
width: 100%;
height: 100%;
}
更多推荐
已为社区贡献11条内容
所有评论(0)