HTML <img>使用说明-相对路径与绝对路径

最新推荐文章于 2025-05-26 16:27:18 发布
最新推荐文章于 2025-05-26 16:27:18 发布
阅读量6.1k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： html img
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/boonyaxnn/article/details/52175955
本文介绍了网页设计中图片路径的两种类型：相对路径与绝对路径。详细解释了它们的区别及如何在HTML中正确使用这两种路径。

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

1.相对路径

外网相对路径：

<img src="/i/eg_tulip.jpg" alt="小妞妞" />

本地相对路径（两个同级的文件）可以直接访问如：

<img src="eg_tulip.jpg" alt="小妞妞" />

2.绝对路径

外网绝对路径：

<img src="http://boonyaxnn.blog.163.com/http://www.w3school.com.cn/i/eg_tulip.jpg" alt="小妞妞" />

本地磁盘绝对路径需要加“file:///"前缀，如：file:///C:/Users/Administrator/Desktop/html/index.html

img使用说明-相对路径与绝对路径 - boonyaxnn - boonyaxnn的博客
 点击页面右键，查看源代码：本地绝对路径-file:///D:/Favorites/eg_tulip.jpg
img使用说明-相对路径与绝对路径 - boonyaxnn - boonyaxnn的博客
 
html_3_img标签_相对路径_绝对路径
surly
11-24 2062
img标签 图片标签，在页面显示一个图片 ​ 语法： ​ <img src="图片路径" alt="当图片显示失败时的文字" title="当光标悬浮在图片上时显示的文字" width="设置图片宽度" height="设置图片高度"/> ps：width和height的值可以不带例如px或em的单位，当只设置其中一个属性时，另外一个会自动等比缩放 相对路径–绝对路径 绝对路径：目标文件在硬盘上的真实路径（最精确路径） 举个栗子：找到文件，右键点击后打开属性，我把喜欢的封面’co.
HTML常用标签-----例如＜p＞＜img＞＜li＞等
qq_56798763的博客
07-04 1142
1.HTML5头部结构 【DOCTYPE html】 声明文档类型为HTML5文件。 文档声明在HTML5文档必不可少，且必须放在文档的第一行。 【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。 写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..
相对路径和img标签demo
02-06
介绍html相对路径和img标签的html的压缩包
HTML 文件路径完全指南：相对路径、绝对路径解析与引用技巧
waterlin2011的博客
05-26 1659
路径的本质是 “位置关系”，理解 “当前文件在哪里” 和 “目标文件在哪里”，就能写出正确的路径！
HTML图像标签<img>和图像相对路径、绝对路径
七七的博客
03-03 7559
图像标签和路径 图像标签 在HTML标签中， 标签用于定义HTML页面中的图像。 <img src="图像URL"> 单词image的缩写,意为图像。 src是标签的必须属性,它用于指定图像文件的路径和文件名。 图像标签的其他属性: src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时显示的文字。 title 文本 提示文本。鼠标放到图像上，提示的文字 wi...
HTML相对路径与绝对路径
teedry的专栏
01-14 9452
     HTML相对路径与绝对路径    在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。初学者可能会感到困惑，下面我就详细的介绍一下相对路径与绝对路径。HTML有2种路径的写法：相对路径和绝对路径。HTML相对路径(Relative Path)同一
相对路径和绝对路径
heart_is_broken的博客
09-15 1950
在做网页的时候，我们一般要向网页中插入图片，在插入图片要用到html的img标签中的src属性。 src即source(来源)的缩写，src的值就是图片的url（或者说地址、路径）。通过查阅文档，可以看到这个属性的语法。 定义图像的语法是： <img src="url" alt="some_text"> 其中url的值就是你的图片路径，这里的图片路径分两种。一种是相对路径，另一种为绝对路径 绝对路径 指文件的从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总以找到要链接的文件。
<!DOCTYPE html> <html> <head> <title>Insert Image Example</title> </head> <body> <!-- 相对路径 --> <img src="images/example.jpg" alt="Example Image" /> <!-- 绝对路径 --> <img src="https://example.com/images/example.jpg" alt="Example Image" /> </body> </html> 文件放在和css，html同一个文件夹吗
06-18
在HTML中，`img`标签用于插入图片，其路径可以使用相对路径或绝对路径。以下是两者的区别以及图片文件与HTML和CSS文件的存放关系。 #### 1. 相对路径与绝对路径的区别 - **相对路径**：相对于当前HTML文件的位置来...
HTML中的＜img＞标签使用指南
一起coding，一起嗨。
06-16 4359
HTML中的标签使用指南
``` <template> <lay-layout class="home-class"> <lay-header> <lay-logo class="logo">工单管理系统</lay-logo> <lay-switch v-model="collapse"></lay-switch> <lay-switch v-model="active20"></lay-switch> <lay-dropdown> <lay-button type="text" icon="layui-icon-user"></lay-button> <template #content> <lay-dropdown-menu> <lay-dropdown-menu-item>个人中心</lay-dropdown-menu-item> <lay-dropdown-menu-item divided>退出登录</lay-dropdown-menu-item> </lay-dropdown-menu> </template> </lay-dropdown> </lay-header> <lay-layout class="flex-container"> <!-- 侧边菜单 --> <lay-side> <lay-menu :collapse="collapse" :tree="isTree" :theme="active20 ? 'dark' : 'light'" :selected-key="selectedKey" :open-keys="openKey" @changeSelectedKey="changeSelectedKey"> <lay-menu-item id="/"> <template #icon> <lay-icon type="layui-icon-home"></lay-icon> </template> <template #title> 首页 </template> </lay-menu-item> <lay-sub-menu id="/processUsage"> <template #icon> <lay-icon type="layui-icon-template"></lay-icon> </template> <template #title> 流程使用 </template> <lay-menu-item id="/apply">工单申请</lay-menu-item> <lay-menu-item id="/draft">草稿箱</lay-menu-item> <lay-menu-item id="/todo">待办事项</lay-menu-item> </lay-sub-menu> <lay-sub-menu title="流程查询" is="queryProcess"> <template #icon> <lay-icon type="layui-icon-search"></lay-icon> </template> <template #title> 流程查询 </template> <lay-menu-item id="/query">工单查询</lay-menu-item> <lay-menu-item id="/my-process">我的发起</lay-menu-item> <lay-menu-item id="/processed">已处理工单</lay-menu-item> </lay-sub-menu> <lay-sub-menu title="系统管理" v-if="isAdmin" id="/system"> <template #icon> <lay-icon type="layui-icon-set"></lay-icon> </template> <template #title> 系统管理 </template> <lay-menu-item id="/permission">权限管理</lay-menu-item> <lay-menu-item id="/workflow">流程配置</lay-menu-item> </lay-sub-menu> </lay-menu> </lay-side> <!-- 主体内容 --> <lay-body style="padding: 20px"> <!-- 面包屑 --> <GlobalBreadcrumb></GlobalBreadcrumb> <router-view /> </lay-body> </lay-layout> </lay-layout> </template> <script setup> import { ref } from 'vue'; import GlobalBreadcrumb from '../components/global/GlobalBreadcrumb.vue'; const isAdmin = ref(true); const collapse = ref(false); const active20 = ref(false); const selectedKey = ref("/") const openKey = ref(["/"]) const isTree = ref(true) </script>```lay-logo 加背景图
03-12
- `background-image`：建议使用绝对路径或正确相对路径 - `background-size`：常用值 - `contain`：完整显示图片 - `cover`：填满容器 - `50px`：固定尺寸 - `text-indent`：隐藏原有文字但保留SEO友好性 3. **...
<template> <div class="common-layout"> <el-container> <el-header> <div class="h-left"> <img class="logo" src="../src/assets/logo.png" alt=""> <div class="h-left-text"> <p class="p1">保尔旅行管理系统</p> <p class="p2">BAOER</p> </div> </div> <div class="h-right"> <img class="user" src="../src/assets/user.png" alt=""> <p class="user-name">管理员</p> <p class="logout">退出</p> </div> </el-header> <el-container> <el-aside style="background-color:#31303D"> <el-col> <el-menu router background-color="#31303D" text-color="#fff" active-text-color="#ffd04b" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-menu-item index="table"> <img src="../src/assets/图标-首页.png" alt=""> <span>首页</span> </el-menu-item> <el-menu-item index="order"> <img src="../src/assets/图标-订单管理.png" alt=""> <span>订单管理</span> </el-menu-item> <el-sub-menu index="userManagement"> <template #title> <img src="../src/assets/图标-用户管理.png" alt=""> <span>用户管理</span> </template> <el-menu-item index="branchMsg">分店信息</el-menu-item> <el-menu-item index="branchSales">分店销售</el-menu-item> <el-menu-item index="headOfficeOperator">总店操作员</el-menu-item> </el-sub-menu> <el-menu-item index="branchManagement"> <img src="../src/assets/图标-分店管理.png" alt=""> <span>分店管理</span> </el-menu-item> <el-sub-menu index="tripMsg"> <template #title> <img src="../src/assets/图标-旅行信息.png" alt=""> <span>旅行信息</span> </template> <el-menu-item index="branchMsg">旅行类型</el-menu-item> </el-sub-menu> <el-sub-menu index="sales"> <template #title> <img src="../src/assets/图标-销售统计.png" alt=""> <span>销售统计</span> </template> <el-menu-item index="salesRecords">销售记录</el-menu-item> </el-sub-menu> </el-menu> </el-col> </el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </div> </template> <script setup lang='ts'> import router from '../src/router' // import {ref,reactive} from 'vue' const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath) } const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath) } // const handleUM = () => { // router.push('/userManagement') // } // const handleTS = () => { // router.push('/tripMsg') // } // const handleSales = () => { // router.push('/sales') // } </script> <style scoped lang='less'> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; } .common-layout { width: 100vw; height: 100vh; display: flex; flex-direction: column; } header { background-color: #31303D; display: flex; width: 100vw; height: 10vh; min-height: 80px; justify-content: space-between; .h-left { display: flex; width: 30%; align-items: center; .logo { height: 70%; margin-left: 2%; } .h-left-text { display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-size: 20px; margin-left: 2%; .p1 { font-weight: 700; } .p2 { font-size: 12px; font-weight: 400; } } } .h-right { display: flex; margin-right: 1%; width: 10%; justify-content: center; align-items: center; .user { height: 50%; } .user-name, .logout { color: white; font-size: 20px; margin-left: 2%; } .logout { cursor: pointer; margin-left: 10%; &:hover { color: red; } } } } .el-container { display: flex; flex: 1; min-height: 0; .el-aside { width: 15vw; min-width: 200px; height: 100%; overflow-y: auto; } .el-main { flex: 1; padding: 15px; height: 100%; overflow-y: auto; width: 85vw; } } </style>点击侧边栏的一级菜单（非子菜单）和二级菜单都能进行路由跳转，并且互不影响。如何实现
最新发布
07-10
为每个需要路由跳转的菜单项（包括一级和二级）设置唯一的`index`，该`index`应该是目标路由的路径（可以是完整路径，也可以是相对路径，但需要和路由配置匹配）。 2. 在路由配置中，确保有对应的路由。 3. 确保`...
关于路径src=“ “目录的表示方法（相对路径和绝对路径详细用法）
热门推荐
Hrenhua的博客
03-11 2万+
在web开发和java动态工程开发的过程中，我们难免遇到目录的路径问题的困扰，今天我给大家和自己总结了一下，资源引用中src="**"的表示方法，在IDEAL,和eclipse,和WebStorm开发中都适用。 在Web开发中，一般资源引用都要用src=URL,来导入我们的资源，如html中的img的用法，<img src="*.jpg"> 下面是一些目录的表示方法： 1、如果是在当前目录：（相对路径） URL=“资源” 即可 比如，我在写的3-11-1.html文件，要导入jq里面的包，3-
前端学习笔记-html-图像标签img&绝对/相对路径
qq_36434637的博客
07-23 1万+
图像标签img (重点) 单词缩写： image 图像 HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下： 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。 <img src="图像URL" /> src用来设置图...
html 的相对路径和绝对路径
weixin_62332711的博客
02-18 5650
图片的话，就要先 ../ 退出 test 文件夹（回到上一级目录）；退出 test 文件夹后。同级的 test 文件夹，通过 / 找到 test 文件夹下一级目录的。①所以我的 src 图片路径为：test/小女孩.jpg。1.2.路径前面加 ./，代表当前（同级）目录。图片在 test 文件夹里面；②的意思和①的意思一样，./ 代表同级目录；图片同级了，然后就就可以直接找到同级的。在 test 文件夹内，如果我要找到。②./ 代表当前目录，所以也可以用。代表当前（同级）目录下的。图片是在同一个目录；
img的三种相对路径与两种绝对路径
m0_65696193的博客
05-17 1457
img相对路径
【前端学习笔记】04-HTML中＜img＞标签的路径语法
SevgiliD的博客
06-03 2505
刚学习HTML时，对img的路径语法总是含糊不清，当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:总结下从本机文件夹导入图片时候相对路径与绝对路径的规则。所谓相对路径，就是相对于自己的目标文件位置。如图片问html文件的在同个目录下时则只需要输入文件的图像名称即可如果是上在一级目录或是上一级目录images里的子目录则分别为：由此可见，若图片位于下一级路径时（即图像文件位于HTML文件同级文件下时），例如在img下 时，则为：绝对路径以Web站点根目录为参考基础的目录路径。之因此称为绝对，
【软考学习14】绝对路径和相对路径的区别和联系
Designer 小郑的技术博客
10-01 3736
本文讲解文件存储中绝对路径和相对路径的区别和联系。简单来讲，绝对路径是把文件所在的完整路径逐一标识出来，相对路径是对某个目录的参考路径，在实战项目的开发中，相对路径会使用的多一些，绝对地址可以用于开发调试环节。
绝对路径和相对路径-最直观的理解
jinglianglove的博客
11-08 1474
绝对路径和相对路径 相对路径：…/ “相对”的意思就是，你要找的这个文件相对与当前文件的位置。也就是 …/…/…/。 绝对路径：@/ 绝对就是你从根目录开始算过来。src开始或者是从E:/开始。也就是@xxx/xxx/xxx ...
HTML / img src 使用绝对路径注意事项
布袋和尚
06-17 5406
今天在开发的时候，需要通过 javascript 加载包含本地图片的路径的 html 字符串来显示到客户端上，按照常规，代码如下： <img src="E:/猴子.jpg"/> 用浏览器打开时没有问题的，但是，客户端上却无法正常显示图片。后来经过上网查资料，以下方案可以解决问题： <img src="file:\\\E:\猴子.jpg"/> 即：绝对路径前面加上“file:\\\”，如果是在C 语言的字符串中，则需要加上转义字符“\”，即：“file:\\\\\\”。 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值