当前位置:首页 > Web技术 > 正文内容

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

admin4年前 (2017-07-18)Web技术1528

    入坑前端,在学习的过程中遇到了一个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://imzxj.com/?id=212

分享给朋友:

相关文章

如何成为一名黑客?

原文出处: Eric Steven Raymond   译文出处:Barret   内容一览为什么会有这份文档?什么是黑客?黑客应有的态度黑客的基本技能黑客文化中的地位黑...

公众号文章预览链接短期内失效怎么办?

公众号文章预览链接短期内失效怎么办?

6月29日公众号调整:“素材库文章预览功能已升级,每次预览后的链接将在短期内失效;链接失效规则仅适用于预览情况,不影响其他功能引用素材库文章。”虽说预览链接失效,不影响其他功能引用,但是预览到手机的链接都不能转发到微信群或者朋友圈了!更烦恼...

如何修改element.style样式

如何修改element.style样式

我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的,还修改不了。其实element.sty...

搞懂VPS 云服务器ECS 虚拟主机

什么是VPS? Virtual Private Server简称VPS。是在一台真实服务器上使用虚拟机技术虚拟成多个小主机,用VZ或VM在一台服务器上虚拟出多个类似独立服务器的部分,每个部分都可以做单独的操作系统,管理方法同服务器...

PyCharm 常见问题汇总

A:download and install jre x86 by jetbrains 要不要选择Q:建议选上,这样可以省去很多不必要的麻烦。jre(Java Runtime Environment)其实就是Java的运行环境,同一个计算机...

马云:未来三十年属于“用好互联网技术”的人

马云:未来三十年属于“用好互联网技术”的人

阿里巴巴董事局主席马云今日上午在第三届世界互联网大会开幕式上发表主题演讲时表示,未来30年属于“用好互联网技术”的公司、国家和年轻人。马云是唯一一位本次世界互联网大会开幕式上发表演讲的中国企业家。 马云表示,未来三十年,是人类最关...