关于h5中图片不显示的问题之绝对路径和相对路径

刚入坑前端,在学习的过程中遇到了一个h5中背景图片不显示的问题。经过各种测试一直无法解决,后来灵机一动,发现原来是路径的问题。
我当时的目录分层就是html文件,css文件夹,image文件夹和js文件夹。由于css和image在同一级别的目录中,所以在css中设置背景图片是采用image/xx.jpg是无法显示的。
解决办法:采用相对路径:../image/xx.jpg即可显示背景图片。
后来又总结了一下相对路径和绝对路径的概念。
绝对路径:所谓绝对路径就是文件的真实路径,通过绝对路径可以直观的得到文件所在的目录信息。比如:一个图片在D盘下的image文件夹中,那么它的绝对路径就是:D:/image/xx.jpg
相对路径:所谓相对路径就是相对于自己目标文件的位置。比如说:在css文件中的css文件中引用了image文件夹中的图片,那么改图片的相对路径就是../image/xxjpg。其中../表示上一级目录。
总结来说:绝对路径是从文件的根目录开始一直到该文件的目录;相对路径是以所在目录为基础延伸出来,找出所用文件的路径。
所以当我们在引用一些文件时,最好的选择是使用相对路径,这样当目录结构不变时依然可以正常引用。如果使用绝对路径当资源目录变化时,就会导致资源无法引用的问题,比如:图片从D盘迁移至E盘时,在使用绝对路径的情况下就无法正常显示。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值