web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。

使用相对路径引入规则:

  1. html或者js引入图片,按照html的目录来算
  2. css引入图片,按照css的目录来计算。

那什么是html目录:

例如:http://ip/a/b 请求回来的是html文件,那么html文件的目录就是/a/ 文件夹,如果此html有一段代码:


<link rel="stylesheet" href="css/aa.css">

那么,css文件的实际引用的路径为 /a/css/aa.css

什么是css目录

简单说就是css文件的存放地址。这儿是/a/css
接上面的地址,css文件(/a/css/aa.css)被引用后,它有一段代码background:url('img/cc.png').
那么 cc.png的实际引用地址为/a/css/img/cc.png

存在的问题:

如果使用前端路由并采用history模式,引入采用相对路径,则可能出现问题。当路由到达2级目录地址时比如: http://ip/1/2 ,此页面如果采用有相对路径的引用,就会失败。所有相对引用地址前都会被加上 /1/ 这个目录地址。当你在此页面刷新时,bug就出来了。


ps: 这儿所说的地址不是打包前的地址,是打包后真实的地址。往后一篇会根据此笔记要点,使用nginx + 一个端口,部署多个采用前端路由(history模式)单页应用。

原文地址:https://segmentfault.com/a/1190000016942706

web前端对文件的引用规则的更多相关文章

  1. Java Web 前端资源文件的路径问题

    WEB-INF是Java Web应用的安全目录,在部署时用于存放class文件.项目用到的库(jar包).Java Web应用的配置文件web.xml. 浏览器不能访问此目录下的资源,比如在WEB-I ...

  2. web前端之文件上传

    前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...

  3. [好文翻译]WEB前端性能优化的14条规则

    作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...

  4. Web前端性能优化——如何有效提升静态文件的加载速度

    WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...

  5. WEB前端 [编码] 规则浅析

    前言 说到前端安全问题,首先想到的无疑是XSS(Cross Site Scripting,即跨站脚本),其主要发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被 ...

  6. web前端性能优化,提升静态文件的加载速度

    原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...

  7. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  8. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  9. web前端对上传的文件进行类型大小判断的js自定义函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Docker入门介绍

    Docker是一种虚拟化技术       刚開始看Docker,感觉非常抽象"An open platform for distributed applications for develo ...

  2. Javascript中的原型继承具体解释

    js中的继承,是面向对象的知识,由于js没有类的概念.所以继承是通过对象实现的.谈到继承.就必须说到prototype,就不得不先说下new的过程. 一个小小的列子: <script type= ...

  3. ABCDE

    ABCDE A-Artificial intelligence 人工智能 B-Block chain 区块链 C-Cloud 云 D-Big Data 大数据 E-Ecology 互联网生态是以互联网 ...

  4. Map 遍历取值及jstl的取值

    Map 遍历取值及jstl的取值 学习了:http://blog.csdn.net/yanjiaye520/article/details/17354239 1.Java map的便利取值 Java代 ...

  5. 我的红外arduino链接,!!!!

    点击打开链接http://blog.csdn.net/g1342522389/article/details/46272473 一定要赞,小编非常辛苦.

  6. Service启动模式

    Service简单介绍        Service表示服务.是Android系统的核心组件之中的一个. Service的本质是一个继承了android.app.Service的java类:     ...

  7. 用树莓派实现RGB LED的颜色控制——C语言版本号

    用树莓派实现RGB LED的颜色控制  RGB色彩模式是工业界的一种颜色标准.是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代 表红.绿 ...

  8. 消除ADB错误“more than one device and emulator”的方法

    当我连着手机充电的时候,启动模拟器调试,运行ADB指令时,报错. C:\Users\gaojs>adb shell error: more than one device and emulato ...

  9. Battle City

    Battle City Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7208   Accepted: 2427 Descr ...

  10. 【Codeforces 258B】 Sort the Array

    [题目链接] http://codeforces.com/contest/451/problem/B [算法] 模拟 在序列中找到一段单调递增的子序列,将这段序列反转,然后判断序列是否变得单调递增,即 ...