web工程下的html中引用其他目录下的文件的path

最新推荐文章于 2024-04-04 05:28:17 发布

原创最新推荐文章于 2024-04-04 05:28:17 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文介绍如何在HTML页面中正确配置视频文件的路径。通过实例演示了从子目录引用父目录下资源的方法，包括如何使用相对路径实现跨目录的资源加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：page目录下的video.html中引用到video目录下的001.mp4，在source标签中的src="../video/001.mp4"

效果：

总结：

以引用页video.html的目录为根目录，即：

1、先退出该目录（page）:".."

2、进入video目录："/video"

3、引用001.mp4："/001.mp4"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

习惯沉淀

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端正确设置资源上下文路径ContextPath（发布目录outDir 、公共基础路径），保证打包部署后站点能正常加载资源。

专注于计算机研发知识和资讯分享

09-09

730

是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。部署站点应用包时的上下文路径，有时候不是根路径,例如是sam。改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。HTML 5新增的事件，当#值发生变化时，就会触发这个事件。HTTP请求#后面是锚点，用于直接定位页面内部的下拉位置。类似命名空间的概念，在不同层次的配置，其作用域不一样。如果访问资源时，不添加上下文路径，则无法找到资源。path: 访问路径（网页文件在服务器中的位置）path 指该参数为路径参数。

html调用点击运行本地py文件,实现HTML调用打开本地软件文件

weixin_29646607的博客

06-04

2581

有时候我们想要实现一个功能，就是在HTML页面点击一个链接就能调用打开本地可执行文件。就像腾讯QQ、迅雷这种。而实现这种功能其实也很简单，就是需要我们添加修改注册表，实现自定义URL Protocol协议。自定义URL Protocol 协议一些应用软件可以在浏览器中点击一个url后自动启动，并执行操作。1.win+r打开注册表，输入regedit进入注册表2. 在注册表左边最上面HKEY_...

参与评论您还未登录，请先登录后发表或查看评论

html 代码 <path,SVG path属性用法及代码示例

weixin_32349093的博客

06-10

2255

path属性分别定义文本路径或运动路径以及文本字符，或者对引用的元素进行动画处理。使用此属性的元素包括：和。用法:path = path-data属性值：path属性接受上面提到和下面描述的值path-data:它具有两个不同的值，即它可以定义文本路径，也可以分别定义要渲染或设置动画的运动路径以及字形。注意：它的默认值被认为是正常的。下面的示例说明path属性的用法。范例1：HTMLGeeksfo...

HTML5(八)——SVG 之 path 详解

m0_70646869的博客

05-10

1930

<path d=" M 0 100 //（0，100）是起点 L 100 100 // 画一条直接到 (100,100) A 100 100 0 1 1 300 100 // 画一段圆弧 L 400 100 //画一条直线到 (400,100) " stroke=“black” stroke-width=“1” fill=“none”> 运行结果如下：可以自己修改上述 A 中参数观察半圆的变化。 1.3、js 操作path 我们经常使用js动态添加、移除元素等，可以实现更炫酷的特.

html path标签的作用

热门推荐

不甘于平凡的溃败的博客

04-03

1万+

<path> 标签用来定义路径。<path> 标签<path> 标签用来定义路径。下面的命令可用于路径数据：M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth q...

HTML5(八)——SVG 之 path 详解，作为前端程序员都应掌握

2401_83977580的博客

04-04

2165

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

HTML5(八)——SVG 之 path 详解，想转行当程序员的必看

03-30

1392

=就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。==就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。

Vue工程模板文件 webpack打包配置方法

10-18

path指定了打包后的文件存放目录，filename则指定了打包后的文件名。 - module：用于处理各种格式的文件模块，通过rules数组配置不同的loader去处理不同类型的文件。 - vue-loader：用于处理.vue文件，将单文件...

给Web工程添加log4j2

yanzy的博客

07-28

596

给现有的工程代码添加log4j，在不破坏原有代码结构的基础上实现log信息记录，我们需要先去官网下载架包，我下载的是apache-log4j-2.12.0-bin，下载地址：https://logging.apache.org/log4j/2.x/download.html 1、先把apache-log4j-2.12.0-bin解压，我们需要其中的 log4j-api-2.12.0、log4j-...

如何在Django项目中引入静态文件

09-18

在Django项目中引入静态文件是构建Web应用时不可或缺的一部分，因为这些文件通常包含CSS、JavaScript和图片等资源，它们负责提升用户体验和页面交互性。接下来我们将深入探讨如何在Django项目中有效地管理静态文件。...

在HTML文件中引入其他文件的方式

continueLR的博客

11-09

4402

按照引入的位置，可分为3种类型第一种，在标签内，也可以说签内引入。 1.在HTML文件中引入css样式，在标签内的方式叫做内联样式，又叫行内样式 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML中引入CSS样式的第一种方式：内联定义方式</title> </head> <body> &lt.

html或者 jsp页面中：path的作用

L-BAKE

12-21

3366

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> js/jquery-1.4.js">

关于html的相对路径问题, 分为引用上级目录和下级目录

caozhisanguo的专栏

07-05

5574

HTML有2种路径的写法：相对路径和绝对路径。相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。比如我们前面建的D盘myweb目录就是名为“myweb”的站点，这时“/index.htm” 路径，就表示文件位置为D:\myweb\index.htm。根相对路径适用于链接内容频

HTML 引用资源路径整理

weixin_34281477的博客

05-31

358

为什么80%的码农都做不了架构师？>>> ...

html 引用文件路径

zzginfo的专栏

10-31

8995

文件及目录： Assets\Css\Test.css Assets\Images\Button_Audit.png BUS\TestURLPath.aspx 源代码： Test.Css .div1 { background-image:url("/Assets/Images/Button_Audit.png"); background-repeat:no-repe

调用上级目录下文件

chichangyou2577的博客

10-15

339

html 获得file文本完整路径

u011425213的专栏

10-15

5015

相信很多人都使用过这样的HTML控件，它看起来非常普通，是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件，然而最近我发现这个控件在最新的FireFox浏览器（或者最新的IE8中也会存在这个问题，我没有尝试过，读者可以试一下）中却失去了效果，导致我们在通过这个控件的value属性得到的值中只包含了文件名而没有文件路径，这个在IE7中是可以正常获取到全文件名的（即文件完整路径+文

HTML5中的video绝对路径

qq_35624395的博客

08-01

9438

ž在HTML5中，video标签是不支持使用绝对路径的，在不想把html文件和视频文件放在同一目录的时候，我们可以使用服务器ip或域名来指定视频位置，例如我的服务器IP为111.111.111.111，我的视频放在upload目录下，那么我的路径可以这么写： src=“http://111.111.111.111/upload/1.mp4”...

是vue工程里面的静态资源路径下有没有文件

最新发布

03-08

<think>好的，我需要帮助用户解决在Vue工程中如何判断静态资源路径下是否存在某个文件的问题。首先，我得回顾之前的对话历史，看看用户之前问过什么，以及我之前的回答是怎样的。用户之前问的是在Vue3前后端分离项目中，如何在前台判断public目录下是否存在HTML文件，不存在时弹出提示。我当时的回答是建议使用Fetch API发送HEAD请求来检查资源是否存在，因为前端无法直接访问服务器文件系统，只能通过HTTP请求来判断。现在用户的新问题是：“是vue工程里面的静态资源路径下有没有文件”。看起来用户可能还是想了解如何检查静态资源是否存在，但可能描述不够准确，或者想更深入了解静态资源路径的处理。首先，我需要明确Vue工程中的静态资源路径。通常，Vue项目中的静态资源分为两部分：位于public目录下的文件和src/assets目录下的文件。public目录下的文件会被直接复制到构建输出目录，而src/assets中的文件则会经过Webpack处理，文件名可能会带有哈希值以优化缓存。用户可能想知道如何检查这两个位置下的文件是否存在。对于public目录下的文件，之前的回答已经覆盖，即通过HTTP请求检查。而对于src/assets下的文件，由于在构建时会被处理，直接通过路径访问可能不可行，需要不同的方法。接下来，我需要整理回答的结构，先区分public和assets目录的不同处理方式，然后分别给出检查方法。对于public目录，使用Fetch或Axios发送请求；对于assets目录，可能需要使用require或import的方法，但需要注意动态路径的问题，因为Webpack在构建时处理模块，动态路径可能无法正确解析。此外，需要注意静态资源在开发环境和生产环境的不同表现，比如开发时可能通过Vue CLI服务器访问，而生产环境则是通过真正的Web服务器，路径可能会有变化。因此，在检查文件是否存在时，路径的准确性很重要。还需要提醒用户，直接访问src/assets中的文件路径在生产环境中可能不可行，因为构建后的路径会改变，建议将需要运行时检查的文件放在public目录下，或者通过后端接口来验证文件存在性，以确保安全性和可靠性。最后，要确保回答符合之前的格式，使用步骤说明、代码示例，并解答相关问题，比如路径处理、动态导入等可能遇到的问题。同时保持语言简洁明了，结构清晰，帮助用户逐步解决问题。</think>在 Vue 工程中，检查静态资源路径下是否存在文件需要根据 **资源存放位置** 和 **构建方式** 分情况处理。以下是具体分析和解决方案： --- ### 一、静态资源分类与路径规则 Vue 项目中静态资源分为两类： 1. **`public` 目录**（直接原样复制到构建输出目录） - 访问路径：直接通过根路径（如 `/example.html`） - 特性：适合无需 Webpack 处理的文件（如第三方库、保留固定路径的资源） 2. **`src/assets` 目录**（由 Webpack 处理） - 访问路径：通过相对路径或 `require`/`import` 引用 - 特性：文件名可能被添加哈希（如 `example.abc123.jpg`），适合需要构建优化的文件 --- ### 二、检查 `public` 目录下的文件 #### 方法 1：通过 HTTP 请求验证 ```javascript // 示例：检查 public 目录下的 example.html async checkPublicFile() { try { const response = await fetch('/example.html', { method: 'HEAD' }); if (!response.ok) { console.log('文件不存在'); alert('未找到所需文件'); } else { console.log('文件存在'); } } catch (error) { console.error('请求失败:', error); } } ``` **注意事项**： - 需确保路径正确（生产环境需匹配服务器部署路径） - 可能受缓存影响，可添加随机查询参数避免缓存： `fetch('/example.html?t=' + Date.now())` --- #### 方法 2：通过 `axios` 库实现 ```javascript import axios from 'axios'; async checkWithAxios() { try { await axios.head('/example.html'); console.log('文件存在'); } catch (error) { if (error.response?.status === 404) { alert('文件不存在'); } } } ``` --- ### 三、检查 `src/assets` 目录下的文件由于 `assets` 文件会被 Webpack 处理并重命名，**无法直接通过路径判断存在性**。需通过以下方式处理： #### 方法 1：动态导入 + 错误捕获 ```javascript async checkAssetFile() { try { // 假设检查 assets/images/example.jpg await import('@/assets/images/example.jpg'); console.log('文件存在'); } catch (error) { console.log('文件不存在'); } } ``` **局限性**： - 仅适用于构建时已知的静态路径 - 无法动态拼接路径（Webpack 需在编译时解析路径） --- #### 方法 2：通过 `require.context` 预加载 ```javascript // 预加载 assets/images 下所有文件 const files = require.context('@/assets/images', false, /\.jpg$/); const fileList = files.keys().map(file => file.replace('./', '')); // 检查是否存在 example.jpg if (fileList.includes('example.jpg')) { console.log('文件存在'); } else { console.log('文件不存在'); } ``` **适用场景**： - 需要批量检查某个目录下的文件 - 路径在编译时已知 --- ### 四、路径问题总结 | 场景 | 推荐方法 | 注意事项 | |---------------------|----------------------------|----------------------------| | `public` 目录文件 | Fetch/axios 发送 HEAD 请求 | 路径需与服务器部署一致 | | `assets` 目录文件 | `require` + 错误捕获 | 无法动态拼接路径 | | 需要动态路径检查 | 通过后端接口实现 | 前端无法直接访问文件系统 | --- ### 五、扩展问题解答 **Q1: 为什么不能直接用 `fs.existsSync` 判断文件存在？** 前端代码运行在浏览器中，无权访问服务器文件系统。若需精确检查，需通过后端接口配合。 **Q2: 如何避免缓存导致误判？** 在请求 URL 中添加随机参数： `fetch('/example.html?t=' + Date.now())` **Q3: 生产环境路径不匹配怎么办？** 在 `vue.config.js` 中配置 `publicPath`： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-subpath/' : '/' }; ```