Web前端之html img标签引用本地图片

最新推荐文章于 2025-07-03 22:05:48 发布
转载 最新推荐文章于 2025-07-03 22:05:48 发布 · 1.3w 阅读 · 0

博客讲述了写代码时图片加载不出来的问题，作者第一次写时遇到此情况，后发现将图片文件夹放在工程文件夹中，就能正常调用图片，从而解决了该问题。

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

<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
                            <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
      <div class="htmledit_views" id="content_views">
                <p>我觉得语法大家都应该明白怎么写</p>

 

<p>&lt;img src="img/demo.PNG"&gt;很简单</p>

 

<p>但是我在第一次写的时候总是出现图片加载不出来的情况</p>

 

<p>然后发现 只要把图片文件夹放在工程文件夹中就可以正常调用了</p>

 

<p><img alt="" class="has" src="https://img-blog.youkuaiyun.com/2018082718022626?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc1MDQ4OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"></p>

<p>这样就解决了这个问题。</p>            </div>
                      </div>

Ha_Girl
关注
Python全栈（九）Web前端基础之1.Web前端介绍和HTML基本标签
CUFEECR的博客
08-10 1344
web1.0时代的网页多是静态网页，缺乏交互性；web2.0时代及以后，出现动态网页；HTML即超文本标记语言，不同的格式用不同的标签来标记，具有不同的语义，HTML具有其自身的特点；编辑器可以选择Sublime、VSCode等，Sublime安装之后需要安装一些常用的插件才能进行更加高效的开发。一个HTML文件包括头部和主体部分，标签有单标签、双标签等，还有很多属性。厂家俺的基础标签包括基础标签、段落标签、水平线标签、修饰标签、特殊符号、列表标签、图片标签和超链接标签等，很多标签都有自己特定的属性。
前端基础入门三大核心之HTML篇：HTML页面优化图片的10大实战策略
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 1076
图片优化不仅是技术的较量，更是对用户体验的细腻考量。上述策略综合运用，可显著提升页面性能，但在实际操作中还需根据项目具体情况灵活调整。你是否曾遇到过特别棘手的图片加载问题？或是有独到的优化技巧想要分享？欢迎在评论区留言，让我们共同探讨，推动Web性能优化的边界。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
Html读取本地文件夹下图片并显示的示例代码
09-22
主要介绍了Html读取本地文件夹下图片并显示的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
WEB前端之html img标签引用本地图片
热门推荐
王智涵的博客
08-27 3万+
我觉得语法大家都应该明白怎么写 &lt;img src="img/demo.PNG"&gt;很简单 但是我在第一次写的时候总是出现图片加载不出来的情况 然后发现 只要把图片文件夹放在工程文件夹中就可以正常调用了 这样就解决了这个问题。...
HTML代码中插入本地图片（jpg或png）【入门级】
最新发布
2301_79863928的博客
07-03 361
最基础的html图片插入
HTML的img插入本地图片
white_mvlog的博客
08-20 9970
HTML的img标签插入本地图片或视频等资源文件，<img src=file:///E://image_test/NOwhite.jpg>这是错误的写法......
img src 本地图片_一次 Web 端大量图片同时加载卡顿问题的优化之旅
weixin_39721953的博客
12-01 721
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]作者：苏格团队https://juejin.im/post/5cbd30e7e51d456e803516ba背景由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。具体场景在描述如何解决问题，我们现在先来申明，问...
html中本地图像的引用
qq_26982459的博客
01-10 8498
html 1、html文件跟.jpg文件(f盘)在不同目录下： 2、.html文件跟.jpg图片在相同目录下： ; 3、.html文件跟.jpg图片在不同目录下： a、图片*.jpg在image文件夹中，*html跟image在同一目录下： &amp;amp;lt;img src=“image/jpg/&amp;quot;width=“300” height=“120”/&amp;amp;gt; b、图片jpg在image文件夹中，*html在...
Web（前端） input标签 上传图片支持预览，计算图片大小 源码
01-15
在Web前端开发中，`input`标签是HTML中用于用户输入数据的重要元素。在这个场景下，我们关注的是`<input type="file">`，它允许用户选择本地文件，特别是用于图片上传。为了提升用户体验，我们可以实现图片上传时的...
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
weixin_62613321的博客
01-24 928
HTML图片标签 超链接标签
js base46转码、保存图片到本地、img显示本地图片.zip
07-16
在HTML中，`<img>`标签通常通过`src`属性来引用图片源。当图片位于本地时，可以使用`file:///`协议或者利用JavaScript动态设置`src`属性。例如，通过`FileReader` API读取本地文件： ```javascript let input = ...
img标签引用本地图片问题
xdblv的博客
03-12 1万+
今天在学习img 标签时,发现按照src语法引用本地图片地址时,图片加载失败,代码如下: 在浏览器运行后,d盘下的这张图片无法显示 网上查阅一番之后才知道,不同浏览器可能对引用路径的写法有不同要求,我用的火狐浏览器无法显示此种写法,但是用谷歌浏览器就可正常显示. 用火狐浏览器需要在路径前面加上 file:// ,如下: 即可正常显示. ...
HTML-img图片
kw741951的博客
01-21 432
img src="https://www.baidu.com/.......> 图片路径,通过http协议，显示图片。<img src="../img/1.jpg"> 上一级目录下的img文件夹中的图片。<img src="img/1.jpg"> 当前目录img文件夹中的图片。<img src="D:\\img\\1.jpg"> 通过绝对路径显示图片。通过base64格式的内容显示图片。
在html中显示本地图片
freeWayWalker的专栏
07-22 2万+
在html中使用javascript显示本地图片的功能如下：                         function getFullPath(obj){                 if(obj){                     //ie                     if (window.navigator.userAgent.
HTML加载本地图片
weixin_34390105的博客
04-02 1万+
<!DOCTYPE html><html> <body><img src="file://C:\Users\Administrator\Desktop\1.jpg"> </body></html> <img src="C:\Users\Administrator\Desktop\1.jpg">也可以注意图片名就是1...
HTML网页图片引用设置
m0_56146871的博客
04-09 2435
html文本网页图片的简单引用 图片引用需要用到标签, 涉及到绝对路径和相对路径 <body> <img src="D:\桌面\代码文件\web\img\11.jpg"> <!--绝对路径+图片名称--> <img src="img\1.jpg"> <!--相对路径+图片名称-> </body> ...
img src 本地图片_简易版图片加水印
weixin_39969568的博客
11-29 182
说明：此篇作为ARTS学习打卡专用（何为ARTS，详见这里），每周输出一篇原创能力有限，但是自己不想说放弃这个 flag，所以以下内容可能存在（但不限于）如下问题：1. 篇幅短小。2. 解释不够详尽。3. 内容不够严谨。4. 措辞未经修饰。背景突然遇到一个需求，想要快速提供一个给图片加水印/图章的工具。身为前端工程师，第一个感觉是查下 node 是否有对应的库可用。在边查边看的过程中，突然想到对于...
img src 本地图片_图片懒加载
weixin_39665762的博客
11-27 1075
效果：原理:设置img的初始src为不请求的空白路径将资源路径赋值到img标签的data-xx属性中，而不是src属性获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-xx的值赋值到src里去要点:获取某个容器下的img:let img_div = document.getElementsByClassName('img_cantent')[0].getEl...
jquery 当页面图片加载之后_图片的懒加载和预加载
weixin_39916355的博客
11-20 362
一、懒加载【1.1】什么是懒加载？懒加载也就是延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次，俗称占位图)，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载？当很多页面，内容很丰...
img src 的本地图片路径标签
02-10
### HTML `img` 标签使用本地图片路径 在HTML文档中，通过`<img>`标签引用本地图片主要依赖于正确设置`src`属性来指向图像的位置。对于位于同一服务器上的资源，推荐采用相对路径而非绝对路径，因为这有助于提高页面移植性和安全性[^1]。 当涉及到项目内部结构时，如果希望链接到根目录下的images文件夹内的picture.jpg文件，则应编写如下代码： ```html <img src="/images/picture.jpg" alt="图片描述"> ``` 针对更复杂的前端框架或构建工具环境，例如Vue.js，在组件化开发模式下可以通过模块解析机制引入静态资产。此时不仅限于简单的URL字符串赋值方式，还可以利用JavaScript动态绑定的方式加载图片资源[^3]： ```vue <template> <div> <img :src="empty"/> </div> </template> <script setup> // 引入本地图片(注意改成您的路径) import empty from '@/assets/img.png' </script> ``` 需要注意的是，出于安全考虑，现代浏览器通常不允许直接通过`file://`协议访问用户硬盘中的私有数据，除非是在特定条件下运行的应用程序内（如某些旧版IE浏览器的行为），因此不建议以此方法尝试在线展示个人电脑里的照片或其他敏感资料[^4]。 为了确保最佳实践并遵循Web标准，应当将所有要使用的多媒体素材放置于网站可公开访问的区域，并按照上述指导原则配置相应的HTML标记。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值