vue 移动端 div背景图片 pc端显示移动端不显示

最新推荐文章于 2024-05-30 10:56:50 发布

——四叶草

最新推荐文章于 2024-05-30 10:56:50 发布

阅读量849

点赞数 1

文章标签：前端 android vue.js

本文链接：https://blog.csdn.net/qq_515023980/article/details/119270486

版权

博客讲述了在移动端开发中遇到的一个问题，即在首页表头添加背景图片时，图片在PC端显示正常，但在测试服务器上无法显示。作者尝试了修改图片路径，但问题依然存在。最终通过调整CSS样式，包括使用`background`属性和指定`background-size`，并在图片引用时使用`require`确保路径正确，解决了移动端图片不显示的问题。这对于前端开发者尤其是初学者来说是一个有价值的教训。

摘要由CSDN通过智能技术生成

最近碰到个需求，移动端首页表头，需要添加背景图片，写好之后在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')"/>

以上这些都是我在工作中碰到的问题（初学者）

——四叶草

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue 移动端 div背景图片 pc端显示移动端不显示

最近碰到个需求，移动端首页表头，需要添加背景图片，写好之后在pc端正常显示没有问题，发布到测试服务器之后找不到图片，一开始以为是图片路径写的有问题，修改之后还是不行，废话不多说直接上代码。style="background-image:url('../../static/image/site/header.png');no-repeat;background-size:405px 70px;这样写pc端没问题，移动端不能识别图片路径。 height: 70px; border-top-left
复制链接

扫一扫