关于url路径的定义方式

一、概述  

  无论是做网页,还是WEB系统,我们都会用到链接,图片,文件的地方,这些地方都涉及到路径的问题,例如:background-image:url();这一CSS样式,而url()的定义方式有两种,一种是绝对路径,一种是相对路径,我们平时在写网页用到最多的是相对路径,这篇文章主要介绍的是绝对路径和相对路径在项目中的应用,这里有人会说相对路径更利于项目的移植和部署,那么我们为什么还要用到绝对路径呢?以下做简要介绍与分析:

二、什么是绝对路径

   绝对路径是指文件在硬盘上真正存储的路径。比如我们在D盘里的images文件夹下存了一张图片logo.png,那么这个图片的绝对路径就是D:\images\logo.png。所以我们在使用绝对路径指向该图片的时候的语句应该为:

  background-image:url("D:\images\logo.png");

  在我们实际编程中我们很少会用到绝对路径,因为本地电脑上的图片的当前位置,很可能在传输到WEB服务器上发生改变,举个简单的例子,假如你得项目文件夹在本地C盘,此时你定义了一个背景图的路径,C:\demo\images\logo.png,此时你把项目整体移动到D盘此时该图片的真正路径为D:demo\images\logo.png,而根据原路径是找不到的。

  

三、什么是相对路径:

  相对路径是指,相对于本文件的目标文件的位置。相对路径可以避免在项目整体目录改变时,绝对路径找不到的问题。相对路径有以下几种情况:

  (1)本文件与目标文件在同一根目录下,例如:demo.html与logo.png在同一目录下:

    

    这时指向logo的相对路径为:background-image:url(logo.png);

    

  (2)本文件与目标文件的上级目录在同一根目录下,例如demo与image在同一目录下,logo在image文件夹内:

      

    这时指向logo的相对路径为:background-image:url(image/logo.png);

  (3)本文件的上级目录与目标文件的上级目录在同一根目录下,例如:demo.html在html6文件夹下,logo在image下:

    

    这时指向logo的相对路径为:background-image:url(../image/logo.png); 这里的../是指向上一级目录,如果你的本文件在第2层目录下用../../去找,依次类推在n层就用n个../。  

四、绝对路径与相对路径的优缺点及使用的地方

  1、绝对路径的优点:

    如果网页位置改变,里面的链接还是指向正确的URL。

  2、绝对路径的缺点:

   在编码编写时不方便使用绝对路径,因为链接应该指向真正的域名而不是开发站点。

  3、相对路径的优点:

  A、容易移动内容,可以整个目录移动。

  B、测试方法比较灵活,本机测试时比较方便。

  4、相对路径的缺点:

    A、部分内容页面换了位置时,链接容易失效。

  B、容易被人大面积采集抄袭。

  结合实际情况,我在项目进行的过程中,分别编写了两个提示页面,一个是无权限访问页,一个是未登录或登录超时页面,这两个页面的跳转地址不固定,尤其是无权限访问页,跳转地址变化非常大,网页内图片不能显示,这时就需要用到绝对路径了,但是为了项目的正常运行绝对路径不能写死(这里有的人叫做相对虚拟目录,其实就是绝对路径的原理),我用JS取值:

//获取项目路径
var contextPath = "${pageContext.request.contextPath}";

//  将   项目路径   与   相对虚拟目录   拼接成绝对路径
var url = contextPath + "/images/logo.jpg";

//给元素URL赋值
$("元素").css("background-image","url(" + url + ")");

  这样无论我们项目部署在哪或者是访问地址如何改变,访问路径都能正确的指向我们想要的url,解决了我们所说的项目移植等问题。

时间: 2024-07-29 22:55:34

关于url路径的定义方式的相关文章

flask四:URL两种传参方式(路径传参和get传参)

新建一个视图 第一种:路径传参:url/参数:<参数名>,然后再视图函数中接收参数 也可以指定数据类型 string:默认使用此数据类型,接收没有任何斜杠"\/"的文本int:接收整形float:接收浮点型path:和string的类似,但是可以接受斜杠 uuid:只接收符合uuid的字符串,一般用于表的主键 使用uuid:10190dee-d9d4-4429-ad51-22f24c0a5ee1 any:可以指定多种数据类型.可以在一个url中映射多个资源 第二种:get传

Spring—请求映射之URL路径映射

Spring2.5引入注解式处理器支持,通过@Controller 和 @RequestMapping注解定义我们的处理器类.并且提供了一组强大的注解:需要通过处理器映射DefaultAnnotationHandlerMapping和处理器适配器AnnotationMethodHandlerAdapter来开启支持@Controller 和 @RequestMapping注解的处理器.@Controller:用于标识是处理器类:@RequestMapping:请求到处理器功能方法的映射规则:@R

ThinkPHP教程_PHP框架之ThinkPHP(二)【URL路径访问与模块控制器、URL四种模式、PATHINFO的两种模式、模板与控制器之间的关系】

一.URL路径访问与模块控制器 URL 模块(控制器) 动作(方法) 即以上三者之间的关系URL:http://127.0.0.1/projectName/index.php/模块/动作 1.ThinkPHP规定,两点 ·第一.所有的主入口文件默认访问index控制器(模块) ·第二.所有的控制器默认执行index方法(动作) 特别强调一下,以上两点是独立的!也就是说"所有的主入口文件默认访问index控制器,并执行默认执行index方法"是不准确的 那么,http://127.0.0

根据url路径获取图片并显示到ListView中

项目开发中我们需要从网络获取图片显示到控件中,很多开源框架如Picasso可以实现图片下载和缓存功能.这里介绍的是一种简易的网络图片获取方式并把它显示到ListView中. 本案例实现的效果如下: 项目结构: 根据部分开源代码,我修改并封装了一个网络图片加载的工具类GetImageByUrl,通过调用其中的setImage方法,传入待显示图片的ImageView控件和该图片的url路径这两个参数即可实现获取网络图片的功能. GetImageByUrl.java package com.leo.i

django url路径与模板中样式相对路径的问题

static目录下有css和js及image等文件夹,里面放置网站的一些静态文件,static位于网站根目录下,django中配置静态文件这个就细说,网上都有,昨天在添加新内容时发现一个问题,我的url如果存在多个"/"的话(我的是3个以上如:/a/b/c/d),模板中调用到的静态文件将无法获取模板中静态文件的引用: <link rel="stylesheet" type="text/css" href="../../static

Ansible系列(六):各种变量定义方式和变量引用

本文目录:1.1 ansible facts1.2 变量引用json数据的方式 1.2.1 引用json字典数据的方式 1.2.2 引用json数组数据的方式 1.2.3 引用facts数据1.3 设置本地facts1.4 输出和引用变量1.5 注册和定义变量的各种方式 1.5.1 register注册变量 1.5.2 set_fact定义变量 1.5.3 vars定义变量 1.5.4 vars_files定义变量 1.5.5 roles中的变量 1.5.6 命令行传递变量 1.5.7 inve

五种函数定义方式----第五种是重点

//函数4要素:返回类型,函数名,参数列表,函数体//1.最简单的定义方式/*function show(){echo "hello"; }*///2.有函数的定义方式/*function show($a){echo a;}*///3.有默认值的函数定义/*function show($a="ccc"){ echo $a;}*///4.有返回值的函数定义/*function show($a,$b){  return $a+$b; }*///5.可变参数的函数定义  

JS类定义方式

// 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : function(v) { this.v1 = v; } }; obj1.set_v1('hello1'); alert(obj1.get_v1()); // 方法2 定义函数对象 var Obj = function() { var v1 = ""; this.get_v1 = function(

数组的三种定义方式

// 数组的三种定义方式 var arr = ['zhangsan','lisi','wangwu']; var arr1 = new Array('zhangsan','lisi','wangwu'); var arr2 = new Array(3); arr2[0] = 'zhangsan'; //注意:下标一定要写,不像在php中,下标是可以不写,是一直追加 // console.log(arr2); // 说明:js中,没有关联数组一说,数组下标都是数字 // 如果一个数组的下标是自定义