程序员经验分享-hwhale

img标签中的src在绝对引用的时候的问题

2023-05-16

昨天晚上我一个朋友目前在培训，他在群里问了下img标签如何绝对路径引用，我当时就笑了这个就是培训机构的老师，就大概看了一下就告诉我朋友那里错了，但是却出来不，我就想自己写一个demo，给他发过去，没想到我因为真的很久没用过绝地路径导致真的就写了快一个小时(我真的尴尬了)

大致是几个问题

1.如何书写

2.HBuilder编辑器为什么在书写正确的情况下报错出不来图片

3.在书写正确的情况用VS Code编辑器其他的浏览器都可以显示，火狐显示不了的情况

我在这个一个小时大概就是遇到了这些问题，真的就是一个小小的绝地路径就搞了怎么久（真的很少用）

书写方式有以下2种

<img src="f:\pic_1.jpg">
		
<img src="file:///f:\pic_1.jpg">

我的图片在F盘的下面，这里要注意斜杠的书写

第2个问题

这个问题就是有有一些浏览器在帮我们打开文件的时候是自己在浏览器帮我们新建了一个虚拟的服务器(hbuilder)就是

 

上面的就是HBuilder打开浏览器的时候显示的地址这里的127.0.0.0:8848就是端口号，所以就是因为这样就会报错Not allowed to load local resource  -- 不允许加载本地资源，

但是我们用VS code的时候就可以了他的地址显示的是

 

这里很明显是不一样的这个就是本机了，所以就可以显示出来的

第3个问题：火狐为什么不可以显示，这里我尝试的是只可以用第二中书写方式file的方式才可以，这个可能是浏览器的兼容问题，

第3个问题没有很深入，因为对个人来讲目前没什么必要去深入这个问题，到这里其实我也是学到了很多东西，可能会有些地方有问题，也喜欢大家可以指出问题，我对其进行修改

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

img标签中的src在绝对引用的时候的问题 的相关文章

  • 构造函数与原型链和面向对象的学习(三)

    小案例 xff08 红绿灯 xff09 下面对面向对象写个小案例 xff08 红绿灯 xff09 上面是原图 用来来实现点击图片 xff0c 红绿灯的颜色改变 xff0c 控制背景图片的定位来改变 点击一下 就是要完成上面的效果 如果只要实

  • js中的预编译和作用域链

    预编译目的 1 定义作用域中的初始化词法环境 xff0c 而词法环境中有定于作用域 xff0c 从而规定了变量的作用域 2 先是在为undefined xff0c 减少运行时报错 形参去实参的区别 1 形参变量只有在被调用时才分配内存单元

  • ffmpeg视频处理神器学习基础笔记

    FFmpeg文档汇总 xff1a https ffmpeg org documentation html FFmpeg filters文档 xff1a https ffmpeg org ffmpeg filters html 视频处理 视频

  • Vue.js动画和过渡

    vue中的过渡与动画 过滤 把需要添加动画效果的DIV放到transition标签 之后就会发生以下3个步骤 自动嗅探目标元素是否应用了 CSS 过渡或动画 xff0c 如果是 xff0c 在恰当的时机添加 删除 CSS 类名 等下要写的6

  • Vue.js使用keyframes动画

    lt DOCTYPE html gt lt html gt lt head gt lt meta charset 61 34 utf 8 34 gt lt title gt Vue中css动画的原理 lt title gt lt scrip

  • Vue.js使用animate.css框架

    1 如何使用animate框架 lt DOCTYPE html gt lt html gt lt head gt lt meta charset 61 34 utf 8 34 gt lt title gt Vue中css动画的原理 lt t

  • vue.js中添加动画

    通过触发事件 xff0c 改变data中的值 xff0c 或者改变点击标签元素上的属性值 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 6

  • 多个元素和列表的过渡

    多个元素 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title gt 多个元素的组件的过渡动

  • flex弹性布局的学习

    布局的传统解决方案是基于盒状模型 xff0c 依赖 display 43 position 43 float 方式来实现 xff0c 灵活性较差 2009年 xff0c W3C提出了一种新的方案 Flex xff0c Flex是Flexib

  • 震惊!Ajax项目中的使用

    啊啊 xff01 实习第一天写了个移动端的分享列表 就在第三天我们的技术大佬亲自教我们如何对接后台 当然用的是我写的移动端的分享列表 虽然这次应用不是很深入 xff0c 但还是比较广泛 用到了Ajax xff0c sui框架 zepto x

  • 关于viewport视口的学习

    简单来说 lt meta name 61 34 viewport 34 content 61 34 width 61 device width initial scale 61 1 0 34 gt content属性值 width 可视区域

  • 淘宝的H5布局

    利用viewport和rem布局实现的淘宝布局 下面先看看em布局的原理 em作为font size的单位时 xff0c 其代表父元素的字体大小 xff0c em作为其他属性单位时 xff0c 代表自身字体大小 MDN em作为字体单位 x

  • css的优先级

    优先级 浏览器通过优先级来判断哪些属性值与一个元素最为相关 xff0c 从而在该元素上应用这些属性值 优先级是基于不同种类选择器组成的匹配规则 优先级是如何计算的 优先级就是分配给指定的 CSS 声明的一个权重 xff0c 它由 匹配的选择

  • Django设置分享到微信好友和朋友圈时的标题、摘要、链接和图片

    主要参考官方文档 1 前端分享给好友和朋友圈的js代码 share html lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta

  • 孙其功陪你学之——如何将shell命令的返回值赋值给应用程序的变量

    如何将shell命令的返回值赋值给应用程序的变量 博主最近做了个路由器的项目 xff0c 需要得到路由器现在网络状态和参数 xff0c 使用UCI get 获得 xff0c 但是使用了system xff08 UCI get xff09 之

  • shell编程2条件语句

    文章目录 shell编程之条件语句1 条件测试1 1 返回值1 2 test 2 文件测试3 整数值比较4 逻辑测试5 if语句5 1 单分支 if 语句5 2 双分支 if 语句5 3 多分支 if 语句 6 case 语句7 实验7 1

  • html和css的hack的学习

    在整理基础的时候总结 html和css的hack的学习 hack是什么 xff1f 就是针对不同的浏览器写不同的css样式让各浏览器能达到一致的渲染效果 xff0c hack分为HTML和CSS HTML hack lt if lte IE

  • 数组的迭代与归并的方法

    迭代的作用 xff1a 减少代码量 xff1a 例如因为map xff0c filter方法会自动生产数组不用自己在for创建 xff0c 有利于性能优化 xff1b 和无需知道对象的长度 补充19 6 11 xff1a 迭代的方法是表达式

  • js数组的常见属性和方法

    属性 strong length strong 是Array的实例属性 返回或设置一个数组中的元素个数 该值是一个无符号 32 bit 整数 xff0c 并且总是大于数组最高项的下标 xff0c 不只是可读 Array prototype

  • js闭包的作用和应用的学习

    什么是闭包 一个函数和对其周围状态 xff08 lexical environment xff0c 词法环境 xff09 的引用捆绑在一起 xff08 或者说函数被引用包围 xff09 xff0c 这样的组合就是闭包 xff08 closu

随机推荐

  • css面试题布局

    不试试怎么知道自己行不行 昨天加了张鑫旭的微信 xff0c 我草贼开心 xff0c 发现他星期六会直播 xff0c 一下就是我看直播学到的一些总结 那么是什么呢 xff1f 其实就是一个简单的左右排版 xff0c 在张老师的讲了4种不是很好

  • 获取css的方法区别

    不试试怎么知道自己不可以 xff1f 对吧 首先我们要知道css在HTML中有多少总方法 xff1f 呵呵大家都知道的 行内 xff1a 顾名思义就是和标签在同一行 lt div class 61 34 text 34 style 61 3

  • 关于offsetLeft和offsetTop的兼容性问题

    不试一下怎么知道自己不可以 xff1f 首先我们要看下offsetLeft和offsetTop他们两的API的作用 xff1b 元素相对于offsetParent的左边距和上边距 xff08 为什么没有bottom xff0c right呢

  • js深度拷贝和浅度拷贝的深入理解

    首先我们来说说什么是拷贝 xff1a 就是复制的同时加上了传值 然后问题就来了什么是有深度的什么是浅度的 xff0c 在想要了解我们这个问题之前我们先来了解一下下面的一个知识点 基本类型传递 xff0c 引用类型传递 首先我们来看下基本类型

  • npm的基本使用

    npm的下载 npm的下载其实就是把node js 百度下node官网 下载好了那么npm就附带下载好了 检查是否下载好 window 43 r 后输入cmd打开终端 xff0c 在终端中输入node v xff1b npm v 他们会输出

  • 从 (a==1&&a==2&&a==3) 成立中看javascript的隐式类型转换

    几天上班看到一个题目就是 if a 61 61 1 amp amp a 61 61 2 amp amp a 61 61 3 console log 34 a等于什么才会输出这一句话呢 xff1f 34 当a为什么的时候输出 xff1a a等

  • Bootstrap实用功能总结

    导航栏 xff1a navbar 导航栏容器可以包含以下几个常用组成 xff1a 1 品牌LOGO xff08 navbar brand xff09 2 导航菜单 xff08 navbar nav xff09 3 导航文本 xff08 na

  • 微信小程序的AJAX初次体验

    GET请求 微信小程序用GET传送数据 微信小程序通过 wx request发送ajax请求 wx request url app globalData pubSiteUrl 43 39 user information get infor

  • vue总结系列 ------ 组件之间的传值

    原因 半年前开始学Vue学到了今天 xff0c 也没有机会好好整理一下自己的知识点 xff0c 因为上公司的项目不是依赖于Vue xff0c 还是在用JQ 和文件之间来传递代码 xff0c 所以其实在对vue的学习成面上来讲对我的帮助并不大

  • vue总结系列 --- 插槽slot

    前因 这个是我这个系列的第二篇 这一篇文章我也修改过三次 xff08 2019 9 10 xff09 我是想以vue官方文档为基础 xff0c 来进行理解 xff0c 有人说有官方文档 xff0c 还要写自己的文章干嘛 xff0c 我的用意

  • vue总结系列 --- 生命周期

    前言 在总结其他的时候发现还是应该先复习vue的生命周期 xff0c 所以就先把生命周期先复习完了 经过一系列的视频 xff0c 文档我把我的总结写一下生命周期分为3个阶段 xff1a 创建 xff0c 更新 xff0c 和销毁 我们看图说

  • vue总结系列 ---- 响应式原理

    检测变化 vue是数据驱动的视图框架DOM是通过数据映射的 xff0c 只有数据改变 xff0c DOM才改变 那么数据是怎么来的呢 xff1f 1 来自父元素的属性 xff08 prop xff09 2 来自组件的自身状态 xff08 d

  • Object.defineProperty()的学习了解

    背景 最近在总结vue系列的时候是看到响应原理的时候 看到一个新的知识点也就是我们的标题Object defineProperty 的时候 xff0c 好了话不多说 xff0c 我们来看看这个是怎么使用的 开始 strong Object

  • vue总结系列 ----- 单向数据流

    可能很多人都以为vue的双向绑定其实是错误的 xff0c vue真正的是单向数据流 xff0c vue的双向绑定只不过是语法糖 我的理解是 xff1a model层 xff1a data对象中的数据 xff0c 或后台传过来的数据 view

  • vue总结系列 ---- 在组件上的v-model单向数据流

    背景 目前是在复习vue原理的过程中 xff0c 前端负责人知道我最近在复习vue xff0c 跟我说要我看组件上的v model 我一听本来是不想放在心上的 xff0c 刚好那天晚上没什么事干想看一下 xff0c 毕竟负责人 xff0c

  • ES6 函数扩展

    参数默认值 也就是说现在ES6对函数中的参数添加了默认值 我们在ES5种的处理 function Fn a b b 61 b 34 nodeing 34 return a 43 b console log Fn 34 hello 34 这样

  • ES6 对象扩展

    对象简写 对象中又分了属性和方法的简写 在es5中 xff0c 有这样一种写法 var name 61 34 xiaoqiang 34 var age 61 12 var obj 61 name name age age 在es6中 xff

  • Bootstrap基础学习笔记

    网格系统 row定义一行 col均分列数 xff0c 最多一行12列 每列左右间隙各15px col 1到12 定义在所有屏幕下的列宽 col sm md lg xl 1到12 定义在指定屏幕下该列占据的列宽 xff0c sm 屏幕 gt

  • ES6 Symbol用法

    Symbol用法 什么是Symbol Symbol是es6中一种新增加的数据类型 xff0c 它表示独一无二的值 es5中我们把数据类型分为基本数据类型 xff08 字符串 数字 布尔 undefined null xff09 和引用数据类

  • img标签中的src在绝对引用的时候的问题

    昨天晚上我一个朋友目前在培训 xff0c 他在群里问了下img标签如何绝对路径引用 xff0c 我当时就笑了这个就是培训机构的老师 xff0c 就大概看了一下就告诉我朋友那里错了 xff0c 但是却出来不 xff0c 我就想自己写一个dem

热门标签