HTML引入图片-绝对路径和相对路径

最新推荐文章于 2024-07-18 15:09:36 发布
最新推荐文章于 2024-07-18 15:09:36 发布
阅读量7.8k 收藏 13
点赞数 5
文章标签： HTML 路径 绝对路径 相对路径 资源引用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AQ3219795118/article/details/109687940
版权

绝对路径和相对路径

我们在插入图片或者插入音频的时候需要找到这个图片或音频的路径，这个时候就需要使用绝对路径和相对路径

绝对路径

绝对路径就是从盘符开始一级一级的往下找，直到找到那个图片
比如我们要引入一个E盘里边的一个名为"篮球.png"的图片如何使用呢
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个上边被选中的蓝色就是我们要找的图片的绝对路径

绝对路径

相对路径就是相对于你这个需要引入图片的HTML文件去查找你需要的图片的路径
在这里插入图片描述
在这里插入图片描述查找上一级目录

还是查找篮球的图片
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
先查找上一级目录然后再一层一层往下找，这个是相对于当前需要引入图片的文件的位置去查找图片

叙利亚暑期工
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML中图片的路径
li12632的博客
06-26 5432
1、相对路径分同一级路径和上一级路径、下一级路径。 2、绝对路径就是指图片在电脑上的绝对位置，通过这个位置可以直接查到图片C:\Users\20946\Pictures\Saved Pictures或者完整的网络地址图片的搜索结果_百度图片搜索 (baidu.com)https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=710813568191797
html相对路径载入页面,html页面的绝对路径和相对路径
weixin_28746207的博客
05-30 1321
在用springmvc架构开发网站的过程中，离不开开发前台html页面，html经常需要使用本地相关的资源，如：图片，js，css等，一般情况下，我们可以通过使用相对路径的方式来对这些资源进行指向和访问，如：如上图的代码，可以用浏览器直接打开此处的代码，banner-graphic.png图片也能够正常显示在页面上，但是，在启动服务器时，在浏览器中打开此文件的时候，图片并不会显示。本系统使用mus...
如何在html中插入图片
Yt0601的博客
06-21 7437
学习html中必学的一个知识点，如何插入图片。 在学习了如何插入图片后，页面会变的丰富很多，在枯燥的文字中添加了一抹亮色
解析相对路径和绝对路径(以图片为例)
SSS4362的博客
06-22 6488
以图片为例,详细解释了相对路径与绝对路径的区别及其用法
html怎么放路径图片,html如何添加图片路径
weixin_32115639的博客
06-26 3913
html添加图片路径的方法:首先新建一个html文件，在正文标签中插入img标签；然后在img标签中添加“alt”属性；最后，插入img标签的图片的宽度和高度默认为图片本身的宽度和高度。本教程的操作环境:windows10系统，html5版本，DELL G3电脑。此方法适用于所有品牌的电脑。相关学习推荐:html教程添加图片路径的Html方法:1.创建一个新的html文件，如图所示，在body标签...
HTML-关于图片以及引入路径
qq_53002037的博客
04-15 1077
自学尚硅谷课程知识点
Web 图片引用之相对路径与绝对路径
桌子LZT的博客
11-06 7699
欢迎来我的博客查看原文。 相对路径与绝对路径，在 Web 开发中我们会经常遇到，本文将尽可能详细的讲解相对路径与绝对路径的区别，并举例说明。 一、基本概念 相对路径（Relative Path）： 相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。也就是指相对于当前位置的路径。 绝对路径（Absolute Path）： 绝对路径是指目录下的绝对位置，直接到达目标位置...
HTML：使用绝对路径插入图片后在浏览器中无法显示的问题
世上哪有什么岁月静好,不过是有人替你负重前行
12-06 3763
在HTML5中，插入图片有两种方式，一种是相对路径，一种是绝对路径。 在做网页和WEB项目的时候，大家还是用相对路径好一点（包括但不限于图片资源，包括其他资源文件），因为，用绝对路径容器出问题。下面，就是我今天使用绝对路径插入图片遇到的问题： 然后在浏览器并不能显示出来 通过测试发现是绝对路径的问题 绝对路径可以直接在文件夹打开这个html文件 就可以显示 ...
某马机构----相对路径.rar
09-28
- **样式表和脚本**：在`<link>`和`<script>`标签中，相对路径用于引用CSS和JavaScript文件。 - **目录结构管理**：通过使用相对路径，可以在不改变文件物理位置的情况下，调整项目目录结构。 4. **注意事项**： ...
vue 解决data中定义图片相对路径页面不显示的问题
10-14
总结，当在Vue的data中定义图片路径并遇到显示问题时，可以尝试使用绝对路径或通过 `require` 动态引入。同时，配合Webpack的别名配置，可以进一步优化代码的可读性和可维护性。确保正确理解Vue对静态资源的处理方式...
CSS与JS中的相对路径引用简单介绍
01-19
大家在html中通常会导入一些外部的css、js文件，而其中一个比较容易被忽视的问题就是路径问题，有时候，我们在css、js中都有通过路径来引入一张图片的需求，当我们采用相对路径的时候，在css和js中引用图片的相对...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
这通常发生在`config/index.js`中的`build`配置中的`assetsPublicPath`设置为`'/'`，即绝对路径的根目录。 解决方法是将`assetsPublicPath`的值更改为`'./'`。这样，资源路径将被解析为相对于`index.html`的相对...
css批量图片路径替换
01-10
- **保持相对路径**：如果项目结构不变，可以只替换根目录的路径，保留相对路径，这种方法对多层目录的项目更适用。 - **转换为绝对路径**：如果新环境要求使用绝对路径，需将所有路径转换。 7. **自动化流程** ...
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
热门推荐
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
HTML图像标签和相对路径及绝对路径
m0_62452636的博客
04-13 5612
下一级路径如下：因为我们只引用一张图片，所以只需要images文件下的某一文件，假设需要bg.gif文件。那么bg.gif文件就是Html文件的下一级。由于页面图片很多，我们通常新建一个文件夹存放图像文件，此时查找图像需要采用路径的方式来指定图像文件的位置。Src是标签的必须属性，它用于指定图像文件的路径和文件名。同一级路径：如果html文件与所要引用的图像文件在同一文件夹下，则为同一级路径。目录下的绝对位置，直接到达目标位置，通常是从盘符（c盘、d盘）开始的路径。Img为图像image缩写。
html常用基础标签（含图片相对、绝对路径）—以前的笔记整理
m0_46072636的博客
07-06 655
html的一些简单标签~整理一些以前的笔记当做复习
HTML网页中显示图片（相对路径 绝对路径）
weixin_44338928的博客
04-13 3万+
HTML网页中显示图片使用标签<img> 要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。 定义图像的语法是：<img src="url" /> 定义图片大小：<img src="url" width="x" height="y"/> URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.
html写图片路径,html如何添加图片路径
weixin_39569112的博客
06-04 5254
html添加图片路径的方法：首先新建html文件，在body标签中插入img标签；然后给img标签添加“alt”属性；最后img标签中插入的图片宽和高默认是图片自身的宽和高。本教程操作环境：windows10系统、html5版，DELL G3电脑，该方法适用于所有品牌电脑。相关学习推荐：html教程html添加图片路径的方法：1、新建html文件，如图所示，在body标签中插入img标签，需要注意...
HTML5实现好看的天气预报网站源码
最新发布
xcLeigh
07-18 1558
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
前端js中引入项目图片路径
09-07
在前端的 JavaScript 中引入项目图片路径可以通过以下几种方式实现： 1. 相对路径：可以使用相对当前 JavaScript 文件的相对路径来引入项目图片。例如，如果项目文件夹结构如下所示： - index.html - js - script.js - images - logo.png 在 script.js 文件中引入图片的代码可以为： ```javascript var img = new Image(); img.src = "../images/logo.png"; ``` 2. 绝对路径：可以直接使用项目中图片的绝对路径来引入图片。例如，如果项目的图片路径为 `https://example.com/images/logo.png` ，在 JavaScript 中引入的代码可以为： ```javascript var img = new Image(); img.src = "https://example.com/images/logo.png"; ``` 3. 使用构建工具：如果项目使用了构建工具（例如 webpack），可以使用构建工具提供的特性来引入图片路径。这样可以更加灵活地处理路径问题。例如，使用 webpack 可以使用 `require` 或 `import` 语句来引入图片： ```javascript import logo from "../images/logo.png"; // 使用 logo 变量即可在页面中引用该图片 ``` 无论使用哪种方式，都需要确保引入的路径正确，并确保项目中图片的路径和文件名是正确的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值