最近碰到个需求,移动端首页表头,需要添加背景图片,写好之后在pc端正常显示没有问题,发布到测试服务器之后找不到图片,一开始以为是图片路径写的有问题,修改之后还是不行,废话不多说直接上代码。
style="background-image:url('../../static/image/site/header.png');no-repeat;background-size:405px 70px;
这样写pc端没问题,移动端不能识别图片路径。
height: 70px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: url("../../static/image/site/header.png");
background-size: 405px 70px;
以上是修改之后的代码,直接用css样式写的,在div上加入class。
height 指定div的高度
border-top-left-radius: 10px;和border-top-right-radius: 10px; 指定左上角和右上角弧度
background-size: 405px 70px; 指定图片的宽度和高度
使用img标签图片路径最好加上 require 这样以防找不到图片
<img :src="require('../../static/image/site/shenpizhong.png')"/>
以上这些都是我在工作中碰到的问题(初学者)