当前位置:首页 > 高效办公 > 正文内容

h5中图片不显示——绝对路径和相对路径

admin7年前 (2017-07-18)高效办公3481

    入坑前端,在学习的过程中遇到了一个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盘时,在使用绝对路径的情况下就无法正常显示。

扫描二维码推送至手机访问。

版权声明:本文由小朱工作笔记发布,如需转载请注明出处。

本文链接:https://www.imzxj.com/?id=212

标签: Web技术
分享给朋友:

相关文章

word2013双面打印及页码设置技巧

word2013双面打印及页码设置技巧

作为职场新人,office办公软件是必须熟悉的一项技能,office的强大我们不可能一次性掌握,但一些技巧是可以在工作中学会的。博主刚入职场的时候就经常做一些打印的小事,记得有一次唰唰唰经理一次发了10几条链接,让我把网页上的内容打印出来。...

H5是什么?

H5 是一个产品名词HTML5 是一个技术名词打个比方,如果有个人跟你说:“我要做个网站,H5的”。那TA是想让你用header、footer、nav、section等标签?让你用Geolocation、localStorage、Web W...

商标国际注册马德里体系

什么是马德里国际商标申请马德里商标国际注册是马德里所有缔约国之间的一种商标国际注册保护方式,它最大的特点就是只需要提交一份申请就可以要求在多个缔约国进行注册。截止2015年12月,共有98个缔约国。马德里国际注册有国际局统一管理,位于瑞士日...

路由器— 交换机 —无线路由器,怎么设置

路由器A—— 交换机 ——无线路由器B,交换机只是起到扩展端口作用,可以看做路由器A的LAN口——无线路由器B的WAN口。无线路由器B设置WAN口动态IP,设置B的LAN口网关不要和A 在一个网段上,避免IP冲突。例如:A的网关IP是192...

彻底搞懂热敏印、热转印和热敏纸、铜版纸等

彻底搞懂热敏印、热转印和热敏纸、铜版纸等

现在电商行业的电子面单就是热敏打印一般吊牌上的不干胶贴可以用热敏打印推荐两款主流电子面单打印机:佳博GP1324D、得力DL-888D。  热敏机和热转印机表现出的不同以下四点:第一,耗材不同:热敏机使用的耗材:热敏纸;(热敏纸质...

如何解决DNS污染、清理DNS缓存

经常有小伙伴连接了VPN软件但却打不开Facebook、YouTube这样的网站,这通常是因为电脑的DNS缓存的问题造成的,通常这样的情况我们只需要清理一下DNS缓存就可以了。1、首先要点击VPN软件的“断开”按钮,然后关闭软件。2、找到V...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。