网站中网页、图片路径问题

经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用HTML语言来调用它们,然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径,大家(尤其是初学网页设计的朋友)往往对它们不够认识,在应该使用相对路径的地方使用了绝对路径,从而导致浏览器无法在指定的位置打开指定的文件,使素材不能正常显示。

  那什么是相对路径?什么是绝对路径呢?为什么使用了绝对路径有时就不能显示呢?让我们一起来认识一下它们吧。

  比如C盘的My Pictures目录下有一个tp.jpg图像,那么它的路径就是c:My picturestp.jpg,其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg,它们的绝对路径是:

  c:My picturesindex.htm

  c:My picturestp.jpg

  如果你使用了绝对路径c:My picturestp.jpg进行图片链接,那么在本地电脑中将一切正常,因为在c:My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后,就不会正常了,因为服务器给你划分的存放空间可能在C盘其他目录中,也可能在D盘其他目录中,总之不会那么巧的就是c:My pictures。那么图片路径应该如何设置呢?这里就必须使用相对路径了,所谓相对路径,顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My picturestp.jpg来定位文件,这样不论将这些文件放到哪里,只要它们的相对关系没有变,就不会出错。具体的链接方式是这样的:“..My picturesimg.jpg”,其中使用“..”来表示上一级目录,“....”表示上上级的目录,以此类推。

  我们一起来看看初学的朋友可能犯的几个路径错误:

例1

  c:mywedwedindex.htm

  c:mywedimgtp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,因为两个文件同在Mywed目录下,所以初学者可能把图片链接写为imgtp.jpg,那么这样实际的链接就变为了C:mywedwedimgtp.jpg,显然这是不正确的。正确的路径应该是相对路径..imgtp.jpg。

例2

  c:mywedwedwed1index.htm

  c:mywedimgimg1tp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误的把图片链接写为..imgimg1tp.jpg,那么这样转为绝对路径就是C:mywedwedimgimg1tp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是....imgimg1tp.jpg。

例3

  c:mywedwedwedindex.htm

  c:mywedwedimgtp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误地把图片链接写为....imgtp.jpg,那么这样转为绝对路径就是C:mywedimgtp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是..imgtp.jpg。

  通过上面三个例子,我们可以看到网页与图片所在目录相同的部分都可以使用“..”进行代替。

  有的读者可能会有这样的疑惑:一个网站有许多的链接,我怎么能保证它们的连接都正确,如果我调整了一下图片或网页的存储路径,那不是全乱了么?为了提高工作效率,我们推荐大家使用Dreamweaver进行网站编辑,因为它有个站点管理功能,使用该功能绝对路径可以自动地转化为相对路径,并且当你在站点中改动文件路径时,与这些文件关联的连接路径都会自动更改,实在是方便极了!

时间: 2024-10-23 12:06:29

网站中网页、图片路径问题的相关文章

jdbc-如何用Java根据存在于sqlserver2000中的图片路径把图片读取出来

问题描述 如何用Java根据存在于sqlserver2000中的图片路径把图片读取出来 把图片都放在一个文件夹里,用sqlserver2000存图片路径,路径该怎么写?如何用Java jdbc桥接方式把图片读取出来?希望高手指导 解决方案 首先我们在sqlserver是有<图片>这个字段用于存贮图片信息的,那我们就解析并输出图片,java读取sqlserver <图片>字段图片并输出你的图片文件夹要在项目下,数据库中写成绝对路径 public class GetPhoto { /*

如何在搭建的asp.net网站中添加图片

问题描述 如何在搭建的asp.net网站中添加图片 在VS2013自动生成的asp.net网站模板中,如何插入图片? 解决方案 你确认你是开发者,而不是一个office操作员?如果你完全不懂html,我想wysiwyg的编辑器才是适合你的. 解决方案二: 不好意思,之前没接触过web,这两天刚申请了azure1元免费使用,好奇,想稍微了解下的.还望不吝赐教.html的基本语法我还是看过一点的.

如何先读取某条记录中的图片路径,再删除图片,最后删除该条记录

问题描述 如何在单击"删除"按钮时,先读取该条记录中的图片路径,再删除图片,最后删除该条记录.因为是博客链接的小项目,一条记录中存储了:姓名.网址.头像物理地址.头像名称等记录,然后,现在要删除该条记录,如何把头像也删除了?请各位高手指点,我一直尝试失败,单个删是成功的.就是不能单击"删除"按钮时,先删除头像图片再删记录的操作.protectedvoidGridView2_RowDeleting(objectsender,GridViewDeleteEventArg

怎样有效提高网站中网页的浏览速度

网页|网站|浏览速度 加快网页打开的速度,有三个途径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.本文站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧.       一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间. 即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的. 优化图片包括减少图片数.降低图像质量.使用恰当的格式

php批量下载网页图片并替换路径为本地

一篇文章复制过来,发现图片路径都是别人网站的,如何一键下载这些图片到本地,并且修改成为本地的路径呢.    代码如下 复制代码 /**  * 获取替换文章中的图片路径  * @param string $xstr 内容 采集网页的content  * @param string $keyword 创建照片的文件名 我写upimg  * @param string $oriweb 网址 一般写null  * @return string  *  */ function replaceimg($xs

Java中使用正则表达式获取网页中所有图片的路径_java

/** * 从HTML源码中提取图片路径,最后以一个 String 类型的 List 返回,如果不包含任何图片,则返回一个 size=0 的List * 需要注意的是,此方法只会提取以下格式的图片:.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic * @param htmlCode HTML源码 * @return <img>标签 src 属性指向的图片地址的

《HTML 5与CSS 3 权威指南(第3版·上册)》——3.3 HTML 5中网页结构

3.3 HTML 5中网页结构 前面两节详细介绍了在HTML 5中具体新增了哪些结构元素以及这些元素的定义和使用方法.在HTML 5中,可以使用这些结构元素来编排一份网页大纲,通过该网页大纲,我们可以一目了然地知道网页中具有哪些内容,网页中以什么样的结构形式来组织这些内容. 3.3.1 HTML 5中的大纲 在Word文档中,一份文档的大纲如下所示: HTML 5网页文档中的大纲也基本如此,只不过使用不同的结构元素进行表达而已.换句话说,在HTML 5中,使用各种结构元素所描述出来的整个网页的层

php自动保存文章内容中的图片

 代码如下 复制代码 <?php /* author: ssh_kobe date: 20110602 shortage: 如果网页中的图片路径不是绝对路径,就无法抓取 */ set_time_limit(0);//抓取不受时间限制 $URL='http://pp.baidu.com/';//任意网址 get_pic($URL); function get_pic($pic_url) { //获取图片二进制流 $data=CurlGet($pic_url); /*利用正则表达式得到图片链接*/

提高网站转化率的图片选取指南

  少有用户在没看到商品的情况下就直接购买.通常情况下,用户至少要在看到产品图片之后才能作出最终的决定.这也是为什么在互联网上销售产品的时候,卖家要耗费巨量的精力来展示产品,用清晰的照片和走心的文案等"套路"来完成销售过程.在互联网产品营销当中,图片起到了至关重要的作用.图片能够从不同的方面帮助营销人员获得相当不错的转化率. 现如今的消费者非常期待能看到足够丰富的产品图片,这样他们能够从中看到这些产品提升他们生活质量的"证据".当产品信息仅限于文本描述的时候,用户很