前端---资源路径

当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

2. 绝对路径

从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

  • 相对路径和绝对路径是 html 标签使用资源文件的两种方式,一般使用相对路径。
  • 相对路径是从当前操作的 html 文档所在目录算起的路径
  • 绝对 路径是从根目录算起的路径

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

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

相关文章

【算法题】10. 正则表达式匹配

题目 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符 * 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 示例 1&#xff1a; 输入&#xf…

Ai画板原理

在创建时画板可以选择数量和排列方式 也可以采用这个图片左上的画板工具&#xff0c;选择画板在其他地方画框即可生成&#xff0c;同时可以在属性框中可以修改尺寸大小 选择全部重新排列可以进行创建时的布局

uniapp创建/运行/发布项目

1、产生背景----跨平台应用框架 在移动端各大App盛行的时代&#xff0c;App之间的竞争也更加激烈&#xff0c;他们执着于让一个应用可以做多个事情 所以就应运而生了小程序&#xff0c;微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。 但是各大App他不可…

VTK+QT配置(VS)

先根据vtk配置这个博客配置基本环境 然后把这个dll文件从VTK的designer目录复制到qt的对应目录里 记得这里是debug版本&#xff0c;你也可以配置release都一样的步骤&#xff0c;然后建立一个qt项目&#xff0c;接着配置包含目录&#xff0c;库目录&#xff0c;链接输入&…

使用Windi CSS(基于vue-cli)

1、先创建vue项目 利用脚手架vue-cli创建&#xff0c;根据需求设置vue版本、babel等&#xff0c;无特别要求直接用默认的vue2或vue3就行 vue create 项目名 2、运行vue项目&#xff0c;利用vue-cli安装Windi CSS 官网指导&#xff1a;Vue CLI 集成 | Windi CSS 我的经历&a…

wsl安装mysql必须sudo才可以登陆

wsl安装mysql必须sudo才可以登陆 背景&#xff1a; win11 21H2wsl2 ubuntu20048.0.35-0ubuntu0.20.04.1 ​ MySQL 默认情况下是以 root 用户身份运行的&#xff0c;因此需要使用 sudo 来访问 MySQL 服务器。如果您希望在不使用 sudo 的情况下登录 MySQL&#xff0c;可以创建…

动态规划-多维

目录 62 不同路径 1143 最长公共子序列 714 买卖股票的最佳时机含手续费 72 编辑距离 62 不同路径 class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>>dp(m,vector<int>(n));for(int i 0;i < n;i)dp[0][i] 1;for(int i…

智能优化算法应用:基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.厨师算法4.实验参数设定5.算法结果6.参考文献7.MA…

Java中synchronized锁升级过程是什么样的

参考文章一 参考文章二 参考文章三 在Java中&#xff0c;对象锁的状态是为了减少同步操作的开销而设计的&#xff0c;主要包括无锁、偏向锁、轻量级锁和重量级锁几个级别。锁的状态会随着竞争情况的不同而升级&#xff0c;但是不会降级。以下是锁状态的一般升级过程&#xff1…

将mapper.xml保存为idea的文件模板

将mapper.xml保存为idea的文件模板 在idea的File and Code Templates中将需要使用模板的内容添加为模板文件。 那么接下来请看图&#xff0c;跟着步骤操作吧。 mapper.xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper P…

代码随想录算法训练营第二十七天|组合总和等

77 组合 1 描述 给定两个整数 n 和 k&#xff0c;返回 1 ... n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 2 代码 class Solution:def combine(self, n: int, k: int) -> List[List[int]]:path []rst…

数据仓库【2】:架构

数据仓库【2】&#xff1a;架构 1、架构图2、ETL流程2.1、ETL -- Extract-Transform-Load2.1.1、数据抽取&#xff08;Extraction&#xff09;2.1.2、数据转换&#xff08;Transformation&#xff09;2.1.3、数据加载&#xff08; Loading &#xff09; 2.2、ETL工具2.2.1、结构…

宝塔面板Linux服务器CentOS 7数据库mysql5.6升级至5.7版本教程

近段时间很多会员问系统更新较慢&#xff0c;也打算上几个好的系统&#xff0c;但几个系统系统只支持MYSQL5.7版本&#xff0c;服务器一直使用较低的MYSQL5.6版本&#xff0c;为了测试几个最新的系统打算让5.6和5.7并存使用&#xff0c;参考了多个文档感觉这种并存问题会很多。…

2023.12.25力扣每日一题——不浪费原料的汉堡制作方案

2023.12.25 题目来源我的题解方法一 数学 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1276 我的题解 方法一 数学 首先判断番茄的数量是不是偶数&#xff0c;若不是则不可能使用完材料&#xff0c;因为两种汉堡的对于番茄的消耗都是偶数&#xff1b;然后假设全部做小…

AOSP源码下载方法,解决repo sync错误:android-13.0.0_r82

篇头 最近写文章&#xff0c;反复多次折腾AOSP代码&#xff0c;因通过网络repo sync aosp代码&#xff0c;能一次顺利下载的概率很低&#xff0c;以前就经常遇到&#xff0c;但从未总结&#xff0c;导致自己也要回头检索方法&#xff0c;所以觉得可以总结一下&#xff0c;涉及…

Vue核心语法、脚手架与组件化开发、VueRouterVuex、综合案例(待办事项工具)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学&#xff0c;可以点心心支持一下哈 一、Vue核心语法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name…

PSoc62™开发板之按键控制LED

实验目的 使用板子上的用户自定义按键控制LED亮灭&#xff0c;当按键按下时LED亮起来&#xff0c;不按下则不亮 电路图 按键电路 板子有两组按键&#xff0c;分别是系统复位按键和用户自定义按键&#xff0c;这里我们选择控制用户自定义按键&#xff0c;可以看到MCU_USER_B…

力扣labuladong——一刷day79

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣785. 判断二分图二、力扣886. 可能的二分法 前言 给你一幅「图」&#xff0c;请你用两种颜色将图中的所有顶点着色&#xff0c;且使得任意一条边的两个…

【华为OD题库-109】正整数excel编号的转换-java

题目 用过excel的都知道excel的列编号是这样的: a b c …z aa ab ac … az ba bb bc …yz za zb zc …Zz aaa aab aac …分别代表以下编号: 123.…26 2728 2. …52 53 54 5 …76 67767867.…702703704 705 …请写个函数&#xff0c;完成从一个正整数到这种字符串之间的转换。 输…

Multi-Drone based Single Object Tracking with Agent Sharing Network阅读笔记

Multi-Drone based Single Object Tracking with Agent Sharing Network阅读笔记 Abstract 搭载摄像头的无人机可以从更广阔的视角在空中动态跟踪目标&#xff0c;与静态摄像头或地面移动传感器相比具有优势。然而&#xff0c;由于外观变化和严重遮挡等多种因素&#xff0c;使…