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

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

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

    入坑前端,在学习的过程中遇到了一个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技术
分享给朋友:

相关文章

H5是什么?

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

纸张尺寸大小开数克重

其实纸张的克数与纸张的厚度无关,是与纸张的密度有关。不过是为了在现实工作中方面顾客选用适宜厚度的纸张来制作合适产品时使用的一种相对概念。        一、纸张形态  从...

人生路坎坷

人生的路,有多长我不知道。但我知道,这条路并不好走。小时候,我们渴望长大,以为长大了就可以做自己喜欢的,和自己喜欢的人永远在一起,以为那是幸福的所在。长大了才明白,那只不过是一场梦。儿时的梦,随着青春的失去,已不复存在。现实的生活,把我们打...

四色印刷 满底印刷 专色印刷

四色印刷(four-color printing),用减色法三原色颜色(青、品红、黄)及黑色进行印刷。满印满底印是说背景都是颜色没有白色的地方满底印刷对设备和技术要求很高,如果是大面积的黑色的底,印刷的不好,会颜色不均匀,你会很不满意的,你...

ps图层移动快捷键

ps中把图层移动快捷键:将当前层下移一层 Ctrl+[ 将当前层上移一层 Ctrl+]将当前层移到最下面 Ctrl+Shift+[将当前层移到最上面 Ctrl+Shift+]激活下一个图层 Alt+[激活上一个图层 Alt+]激活...

NikonNIKKOR尼克尔镜头名称中的字母含义

我们用许多不同的名称来描述尼克尔镜头的各类特性,其中一些名称容易造成混淆。下列定义有助于理解这些缩写。ED: Extra-Low Dispersion glass (超低色散镜片)一种高品质镜片,用于纠正色差,即各类波长的光线通过光学镜片时...

发表评论

访客

看不清,换一张

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