一、基本概念 1、相对路径-顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。 2、绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。...二、相对路径使用的特殊符号 以下为建立路径所使用的几个特殊符号，及其所代表的意义。 "./"：代表目前所在的目录。 "../"：代表上一层目录。 以"/"开头：代表根目录。...1、文件在当前目录 Page2.html访问Page2Image.jpg img src=”....img src=”.....2、绝对路径的缺点： A、在编码编写时不方便使用绝对路径，因为链接应该指向真正的域名而不是开发站点。 相对路径的优缺点和绝对路径几乎相反。
/images/demo.png"> 这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。...2、使用**import**引入图片 img :src="src"> //使用import引入 import img from '...../images/demo.png' //data中定义变量src data() { return { src: img } } 3、使用**require**动态加载 img :src...这类资源将会直接被拷贝，而不会经过 webpack 的处理。 原理 从相对路径导入 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 ....拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。
代码如下： 1、引入网络上的资源： img src="http://完整的URL描述地址"> 2、引入电脑本地的绝对路径，如D盘下images文件夹里名称为“aaa.jpg”的图片： img src...什么是相对路径？相对路径是指该文件所在路径与其它文件（或文件夹）所在路径的关系。...相对路径里常使用“../”来表示上一级目录，如果有多个上一级目录，可以使用多个“../”表示为上上级； 如果链接到当前目录下，只需输入被链接对象的名称即可，如：aaa.jpg； 如果链接到下一级目录，只需输入该目录名...相对路径适合网站的内部引用，只要是在同一个站点，就可以自由的在文件之间构建链接，不受站点所处服务器的影响，这种书写形式省略了绝对路径中相同的部分，可以在站点文件所在服务器地址发生改变时，文件夹的内部链接不会出现问题...根目录是指逻辑驱动器的最上一级目录，本地根目录例如C盘、D盘等； 网站根目录指的是一个服务器上同时放置多个站点使用，或者一个大规模站点需要放置在几个服务器上。
代码如下： 1、引入网络上的资源： img src="http://完整的URL描述地址"> 2、引入电脑本地的绝对路径，如D盘下images文件夹里名称为“aaa.jpg”的图片： img src...什么是相对路径？ 相对路径是指该文件所在路径与其它文件（或文件夹）所在路径的关系。...相对路径里常使用“../”来表示上一级目录，如果有多个上一级目录，可以使用多个“../”表示为上上级； 如果链接到当前目录下，只需输入被链接对象的名称即可，如：aaa.jpg； 如果链接到下一级目录，只需输入该目录名...相对路径适合网站的内部引用，只要是在同一个站点，就可以自由的在文件之间构建链接，不受站点所处服务器的影响，这种书写形式省略了绝对路径中相同的部分，可以在站点文件所在服务器地址发生改变时，文件夹的内部链接不会出现问题...根目录是指逻辑驱动器的最上一级目录，本地根目录例如C盘、D盘等； 网站根目录指的是一个服务器上同时放置多个站点使用，或者一个大规模站点需要放置在几个服务器上。
, 统一资源定位符，俗称：路径 目录结构：一个站点中的目录与目录之间的关系 URL 就是负责到目录中将资源文件的地址描述出来 资源文件：就是网页要用到的文件...URL 在 Web 上共有3种表现形式： 1、绝对路径 2、相对路径 3、根相对路径 路径详解：...先返回 通过 ../ 表示向上返回一级目录 3、根相对路径 永远都是从 WEB项目 所在的根目录处开始查找资源文件的位置...以 / 作为开始的路径表现形式就是 根相对路径 2、图像 1、图像的格式 1、 **.jpg...1、src 要显示的图像的URL 所有的URL都要严格区分大小写 2、width
：代表目前所在的目录，相对路径。如：内容、img src="./aaa" /> “..”：代表上一层的目录，相对路径。如：内容、img src="../aaa" /> “../../”：代表的是上一层目录的上一层目录，相对路径。如：img src="../.....二、href与src区别 相信大家对href和src一定不会陌生，平时我们开发项目，只知道a和link标签习惯性的，行尸走肉式的使用href；而img和script也是习惯性的使用src链接资源。...然而我们对于为什么使用href或者src并不是太深入的了解。 href和src是有区别的，而且是不能相互替换的。...这与把css文件内容写在标签里不相同，因此建议使用link标签而不是@import来吧样式表导入到html文档里。
以下是 img> 标签的基本用法： img src="image.jpg" alt="图片描述"> src 属性：指定图像文件的URL或路径。...图像可以来自本地计算机上的文件，也可以来自远程服务器上的文件。下面是一些常见的图像路径示例： 相对路径：相对于当前HTML文件的路径。...例如，如果HTML文件和图像文件位于同一目录下，您可以使用相对路径：src="image.jpg"。...绝对路径：包括完整的URL，通常用于引用远程服务器上的图像，如 src="https://example.com/image.jpg"。 根路径：以斜杠开头，表示相对于Web服务器的根目录。...请确保合理使用图像，以提高用户体验和网站性能。 希望本文对您理解HTML图像标签和其属性有所帮助。如果您正在学习Web开发，这是一个重要的基础知识点，可以让您创建更具吸引力的网页。
以下为建立路径所使用的几个特殊符号，及其所代表的意义。 （1）.：代表目前所在的目录，相对路径。 例如 文本 或 img src="....：代表上一层目录，相对路径。 例如 文本 或 img src="../abc" /> （3）../../：代表的是上一层目录的上一层目录，相对路径。...（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片； 7.2 作用结果不同 （1）href 用于在当前文档和引用资源之间确立联系； （2）src...这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。...这也是为什么建议把 js 脚本放在底部而不是头部的原因。
内容居中标签 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间 示例： 当前目录中的图片 --> img src="2.jpg"> --> img src=".\2.jpg"> 的图片 --> 当前目录中的图片 --> img src="2.jpg"> --> img src="images/1.jpg"> 当前目录中的图片 --> img src="2.jpg"> --> img src="D:\3.jpg"> 的图片 --> 相对路径和绝对路径的总结 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
绝对路径： (远程)由http协议，主机名，文件夹的名称，文件名 (本地)file:// 相对路径： 同一级：直接用 子目录：先进入，后使用 父目录...：先返回，后使用 ...../返回上一级目录 根相对路径： 有web站点的根目录出发 以/为开始 img src="/" /> /表示服务器的根据目录，以此为标准进行目标搜寻目标文件
这就是相对路径和绝对路径的问题。 1、相对路径 写法一採用了“相对路径”方法，所谓的相对路径，就是在同一个站点下，不同文件之间的的位置定位。...我们分析一下，“网页1”和images目录位于站点BookTest根目录下，而海贼王图片位于images目录下。那么src应该是“images/海贼王.jpg”。 那有同学就会问，那下图2中。...“网页1”假设要引用海贼王图片的相对路径怎么写呢？ 相对路径 答案应该是：img src=”海贼王.jpg” alt=”海贼王”/>。这个时候网页1与海贼王图片位于同一文件夹下。...写法一是相对路径写法。而写法二是绝对路径写法。 我们分析一下。“网页2”位于test目录下，而海贼王图片位于images目录下。...大家要懂得这样的写法。 如今就能够对相对路径写法进行总结了。相对路径的写法首先就是要分析当前网页的位置和图像的位置之间的关系，然后用一种方式把他们之间的相对关系表达出来。
--使用本地资源:图片位于本地电脑中--> 战斗天使：阿丽塔 ...--使用网络资源:--> img src="http://img3.imgtn.bdimg.com/it/u=1057132256,1537894663&fm=11&gp=0.jpg"...width="500px"/> 图片标签学习 图片标签学习: 图片标签: img src:图片路径 本地资源路径:一般本地图片资源使用相对路径即可 网络资源路径...:图片资源的URL地址 width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比 height:设置图片的高度,如果是单独设置...(行内元素) **注意** 相对路径:从当前文件出发查找另一个文件所经过的路径 绝对路径:从根盘符出发所查找文件的路径 ---- ---- 战斗天使：阿丽塔 ---- ?
标记而不是标记）。...url(xss.htc);"> US-ASCII encoding: 它使用格式错误的ASCII编码，使用7位而不是8位。...此外，这依赖于网站使用动态放置的图像，如“images/image.jpg”，而不是完整路径。...但是，您确实需要保留斜杠，否则这将被解释为相对路径URL。...与下一个不同，这在Opera中不起作用，因为Opera认为这是旧的HTTP基本身份验证仿冒攻击，而不是。这只是一个格式错误的URL。
title: 使用docusaurus快速搭建静态博客站点 description: 使用docusaurus快速搭建静态博客站点 slug: use-docusaurus-to-deploy-blog...: https://walrus.net.cn image_url: img/walrus.jpgundefined Docusaurus是一种静态站点生成器。...，其中config.title指的是你的站点名称，config.url是你的站点发布后的地址，其他字段按需要修改。...authors是作者信息：name是作者名称, title相当于个性签名，url是作者主页，image_url是作者头像，支持外部链接，也支持本地相对路径，img/walrus.jpg指向的是....切换到浏览器，可以看到默认的列表页已经可以看到刚才新增的博客，如下图所示： [03.png] 第四步：发布博客站点 本地启动的只是开发服务器，一般只建议在开发环境使用它。
这类资源将会直接被拷贝，而不会经过 webpack 的处理。 从相对路径导入 当在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . ...开头) 引用一个静态资源时，该资源将会被包含进 webpack 的依赖图中。编译过程中，所有诸如 img src="...">、background: url(...) ...和 CSS @import 的资源 URL 都会被解析为一个模块依赖。 例如，url(./image.png) 会被翻译为 require('./image.png')，而： img src="....这意味着你甚至可以引用 Node 模块中的资源： img src="~some-npm-package/foo.png"> 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。...2、文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。 3、最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
4.采取键值对 key=”value” 的格式 图像标签 作用：用于显示图像 语法格式：img src="dir/img.img" /> -src：用于指定图像文件的路径和文件名 -alt：用于图像不能显示时的替换文本...语法格式：内容 -href：跳转链接URL地址 -target：跳转方式：_self：当前页面（默认值），_blank：新窗口 锚点链接...-- 注释语句 --> 路径 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。...img src="img/img1/img.jpg" /> 3.图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如img src="../...../img.jpg" /> 绝对路径：绝对路径以Web站点或磁盘根目录为参考基础的目录路径。
4.采取键值对 key="value" 的格式 图像标签 作用：用于显示图像 语法格式：img src="dir/img.img" /> -src：用于指定图像文件的路径和文件名 -alt：用于图像不能显示时的替换文本...语法格式：内容 -href：跳转链接URL地址 -target：跳转方式：_self：当前页面（默认值），_blank：新窗口 锚点链接...-- 注释语句 --> 路径 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。...img src="img/img1/img.jpg" /> 3.图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如img src="../...../img.jpg" /> 绝对路径：绝对路径以Web站点或磁盘根目录为参考基础的目录路径。
/img.png' document.getElementById('hero-img').src = imgUrl 例如，在开发阶段，imgUrl将是/img.png，而在生产版本中，它将变成/assets...其行为类似于webpack的文件加载器。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径)，也可以使用相对路径。 CSS中的url()引用也以同样的方式处理。...Explicit URL Imports 没有包含在内部列表或assetsInclude中的资产，可以使用? URL后缀作为URL显式导入。...URL而首先导入资产 然后，您可以将资产放置在项目根目录下的特殊公共目录中。...在开发过程中，这个目录中的资源将在根路径/中提供，并原样复制到dist目录的根目录中。 该目录默认为/public，但可以通过publicDir选项配置。
双边标记： 单边标记： 转成 转成 ，还有img src=“URL” /> （4）所有的属性值必须加引号。...属性效果演示： 内容居中标签： 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。...src属性：图片的相对路径和绝对路径 在写图片的路径时，有两种写法：相对路径、绝对路径 1、写法一：相对路径 相对当前页面所在的路径。两个标记 . 和 .....分表代表当前目录和父路径。 当前目录中的图片 --> img src="2.jpg"> img src=".\2.jpg"> <!...举例： img src="http://img.smyhvae.com/2016040102.jpg"> 相对路径和绝对路径的总结 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
