URL中绝对路径与相对路径拼接问题总结

news2024/11/19 20:39:51

URL中绝对路径与相对路径拼接问题总结

  • 1. 基础环境
  • 2. 测试
    • 2.1 总结
    • 2.2 本地文件url

1. 基础环境

这里用nginxdocker镜像构建了一个服务,步骤如下:

  • sudo docker pull nginx
  • sudo docker run -d --name nginx01 -p 8083:80 nginx

nginx发布的根目录是/usr/share/nginx/html,目录结构如下:

.
|-- 50x.html
|-- assets
|   `-- images
|       |-- t1.png
|       `-- t2.jpg
|-- index.html
`-- subpage
    `-- sub.html

2. 测试

请求的urlhttp://192.168.136.167:8083/subpage/sub.htmlhtml的测试数据如下:

  • <img src="./assets/images/t2.jpg" alt="测试以.开头" style="width:50px;height:60px;">
  • <img src="../assets/images/t1.png" alt="测试以开头" style="width:50px;height:60px;">
  • <img src="/assets/images/t2.jpg" alt="测试以/开头" style="width:50px;height:60px;">
  • <img src="//assets/images/t2.jpg" alt="测试以//开头" style="width:50px;height:60px;">

请求时的最终拼接后的url:

  • http://192.168.136.167:8083/subpage/assets/images/t2.jpg
  • http://192.168.136.167:8083/assets/images/t1.png
  • http://192.168.136.167:8083/assets/images/t2.jpg
  • http://assets/images/t2.png

界面最终的显示结果:
在这里插入图片描述

2.1 总结

  • ...目录或文件名 开头的路径,拼接时会以url地址栏的当前目录路径与该路径拼接
  • / 开头的路径,拼接时会以url地址栏的协议及域名与该路径拼接
  • // 开头的路径,拼接时会以url地址栏中的协议与该路径拼接

url地址栏中目录路径与文件路径区分:

  • url地址栏中路径以/结尾表示目录路径,如http://localhost:8083/abc/,此时abc就表示目录
  • url地址栏中路径不以/结尾表示文件路径,如http://localhost:8083/abc,此时abc就表示文件

2.2 本地文件url

打开本地文件时url格式如下:

  • file:///D:/readme.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/148904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis安装及常用数据类型介绍

1、redis介绍1.1、redis是一个开源的key-value存储系统1.2、和Memcached类似&#xff0c;它支持存储的value类型相对很多&#xff0c;包括String、list、set、zset以及hash类型。1.3、这些数据类型都支持push/pop、add/remove及取交集并集及更丰富的操作&#xff0c;而且这些操…

LeetCode[264]丑数II

难度&#xff1a;中等题目&#xff1a;给你一个整数 n&#xff0c;请你找出并返回第 n个 丑数 。丑数 就是只包含质因数 2、3和/或 5的正整数。示例 1&#xff1a;输入&#xff1a;n 10输出&#xff1a;12解释&#xff1a;[1, 2, 3, 4, 5, 6, 8, 9, 10, 12] 是由前 10 个丑数组…

【NKOJ三校 初中新年大联欢DIV2】考试游记

目录 看不见的手ljj的方块零它来了宝石转换ljj的距离零它走了彩蛋 题目 【A NKOJ-P8629】 看不见的手 40pts 考试思路&#xff1a; 这道题一看数据范围就知道是O(n)O(n)O(n)的结论题&#xff0c;考试的时候脑子抽筋偏分输出1得了40pts&#xff1b; 正解&#xff1a; 他说…

VISTA -MIT开源基于数据驱动的自动驾驶仿真引擎

引言 VISTA 是MIT开源的一个基于数据驱动的用于自动驾驶感知和控制的仿真引擎。VISTA API提供了一个接口&#xff0c;用于将真实世界的数据集转换为具有dynamic agents、sensor suites、task objectives的虚拟环境。 用过 Unreal Engine 或者 Gazebo的仿真引擎的同学都知道&…

【Kafka】八股文梳理

什么是消息中间件&#xff1f; 消息中间件是基于队列与消息传递技术&#xff0c;在网络环境中为应用系统提供同步或异步、可靠的消息传输的支撑性软件系统。 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流&#xff0c;并基于数据通信来进行分布式系统的集成。…

Android Native开发系列之C/C++代码调试

Android Native开发系列之C/C代码调试 引言 在做Android native层开发的时候&#xff0c;需要经常调试C/C代码&#xff0c;相较而言通过打日志的方式太不方便了。有两种方式可以进行底层代码的调试。 利用Android studio自带的Debugger进行调试。利用LLDB VSCode进行代码调试…

SAP灵活工作流条件增强

前置 灵活工作流模板中可以设置条件&#xff0c;用来在场景配置中判断是否启动流程或者是否执行该节点 除了流程模板中设置&#xff0c;也可以通过增强设置更为灵活的条件判断,对应增强点SWF_PROCESS_WORKFLOW_CONDITION 增强实施步骤参考 创建增强点实施 复制示例类 为增强设…

深入聊一聊vue3中的reactive()

在vue3的开发中&#xff0c;reactive是提供实现响应式数据的方法。日常开发这个是使用频率很高的api。这篇文章笔者就来探索其内部运行机制。小白一枚&#xff0c;写得不好请多多见谅。 调试版本为3.2.45 什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中…

【Dash搭建可视化网站】项目9:智能选股器(结合行业、换手率、量比与60日k线图选择目标股票)制作步骤详解

【Dash搭建可视化网站】项目9&#xff1a;智能选股器&#xff08;结合行业、换手率、量比与60日k线图选择目标股票&#xff09;1 项目效果图2 项目架构3 文件介绍和功能完善3.1 assets文件夹介绍3.2 app.py和index.py文件完善3.3 layoutleft.py文件完善3.4 api.py和api.ipynb文…

【数据结构趣味多】栈和队列(详细解析)

目录 1.1 栈的定义 1.2 栈的模拟实现&#xff08;顺序栈&#xff09; push()方法 pop()方法 peek()方法 size()方法 栈模拟实现的全代码 1.3顺序栈和链栈的对比 2.队列 2.1队列的定义 2.1队列的模拟实现&#xff08;单链表&#xff09; offer()函数 poll()函数 p…

ABB AC500 PLC 与西门子 S7-300 CPU DP 通讯

硬件连接 将一个 AC500 CPU&#xff08;本例 PM583&#xff09; 左侧插入以 DP 通讯扩展模块 CM572&#xff0c;使用 DP 通讯电缆连接 CM572 与 314-2DP CPU 的 DP 通讯口。连接示意图如下&#xff1a; AC500 DP 主站配置 安装 DP 从站设备描述文件 从西门子官方网站下载 CP…

认识二叉树

hi&#xff0c;代噶候。今天带大家认识一下二叉树&#xff0c;这个二叉树在我看来确实很有难度&#xff0c;但是不要怕&#xff0c;&#xff0c;鲁迅先生曾经说过&#xff0c;真正的勇士敢于面对惨淡的人生&#xff0c;敢于正视淋漓 的鲜血&#xff0c;下面让我们开始吧&#x…

线程池的内部结构与原理解析

线程池的内部结构 使⽤线程池的原因&#xff1a; 1、降低资源消耗 2、控制并发的数量。并发数量过多&#xff0c;可能会导致资源消耗过多&#xff0c;从⽽造成服务器崩溃 3、提高线程的可管理性 1、线程是稀缺资源&#xff0c;如果无限制地创建&#xff0c;不仅会消耗系统资源&…

Global Illumination_SDF Generate Visualize Shadow

Signed Distance Field(有向距离场)&#xff0c;简称SDF&#xff0c;这其实是图形学中非常常用的数学概念。数学上来说&#xff0c;是定义在空间中的一个标量场&#xff0c;标量值为空间一点到曲面的距离。曲面外的点为正值&#xff0c;曲面上的点为0&#xff0c;曲面内的点为负…

通用vue组件化展示列表数据

一、数据的简单展示 1.首先先确定要展示的表格列名以及拿到所需要展示的数组数据 2.然后建立一个专门放el-table遍历的文件 3.在父组件中将数据列表数据存放在listData里面&#xff0c;然后传给子组件&#xff0c;子组件定义一个动态的列&#xff0c;通过遍历propList得到列名…

SpringCloud从入门到精通(八)

config config-概述 • Spring Cloud Config 解决了在分布式场景下多环境配置文件的管理和维护。 • 好处&#xff1a; 集中管理配置文件 不同环境不同配置&#xff0c;动态化的配置更新 配置信息改变时&#xff0c;不需要重启即可更新配置信息到服务config-快速入门 gitee搭…

一文告别结合Nacos后,Springboot的配置文件看不懂的痛苦

一、背景 后端基于SpringCloud项目架构的话&#xff0c;默认会使用Nacos来做配置中心&#xff0c;但是这对从来没接触过Nacos配置中心的小伙伴&#xff0c;肯定就不知道怎么回事了&#xff0c;于是便有了这一篇指引。 二、Nacos配置中心是如何引入SpringCloud项目中的呢&…

操作系统实验8:proc文件的实现

实验目的 掌握虚拟文件系统的实现原理实践文件、目录、索引节点等概念 实验内容 在Linux 0.11上实现procfs&#xff08;proc文件系统&#xff09;内的psinfo结点。当读取此结点的内容时&#xff0c;可得到系统当前所有进程的状态信息。例如&#xff0c;用cat命令显示/proc/p…

有限状态机

文章目录1.概念2.什么是计算3.什么是有限状态机3.1特性3.2为什么要用状态机4.实战4.1字符串转换整数4.2用有限状态机实现4.3源码1.概念 有限状态机&#xff08;英语&#xff1a;finite-state machine&#xff0c;缩写&#xff1a;FSM&#xff09;又称有限状态自动机&#xff0…

【手写 Vue2.x 源码】第十篇 - 数组数据变化的观测情况

一&#xff0c;前言 上篇&#xff0c;主要介绍了对象数据变化的观测情况&#xff0c;涉及以下几个点&#xff1a; 实现了对象老属性值变更为对象、数组时的深层观测处理&#xff1b; 结合实现原理&#xff0c;说明了对象新增属性不能被观测的原因&#xff0c;及如何实现数据…