HTML：使用绝对路径插入图片后在浏览器中无法显示的问题

已于 2023-06-01 11:28:48 修改
阅读量3.7k 收藏 6
点赞数
分类专栏： java问题总结 文章标签： html 前端
于 2021-12-06 10:37:45 首次发布
王锡豪
本文链接：https://blog.csdn.net/wang121213145/article/details/121741782
版权
在HTML5中，插入图片通常推荐使用相对路径，以确保网页在不同环境下能正确显示。然而，作者在实际操作中遇到了使用绝对路径导致图片无法在浏览器正常显示的问题。虽然绝对路径在本地文件夹中可以正常工作，但在某些容器或部署环境中可能引发问题。此博客探讨了这个问题，并强调了相对路径在资源引用上的优势。
摘要由CSDN通过智能技术生成
在HTML5中，插入图片有两种方式，一种是相对路径，一种是绝对路径。

在做网页和WEB项目的时候，大家还是用相对路径好一点（包括但不限于图片资源，包括其他资源文件），因为，用绝对路径容器出问题。下面，就是我今天使用绝对路径插入图片遇到的问题：

在这里插入图片描述
然后在浏览器并不能显示出来
通过测试发现是绝对路径的问题

绝对路径可以直接在文件夹打开这个html文件 就可以显示
在这里插入图片描述

杵意
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML img 中的 src 访问不到绝对路径下的图片怎么办?
qq_41424688的博客
10-10 3万+
HTML访问不到绝对路径下的图片怎么办?        有时候我们使用 img 标签下的src属性访问图片的时候,会想把图片放到D盘或者E盘的某个路径。但是结果却是访问不到。一开F12调试却看到了绝对路径前面多了 file:///。就是下图这个样子。但是当我们用浏览器访问却可以访问得到。这怎么解决呢?        其实只要把目录拦截住然后映射到D盘或者E盘就好了。如
img标签使用绝对路径无法显示图片
u013455166的专栏
02-11 8249
说明：图片的磁盘路径斜杠使用右斜杠“\”，而图片的网络路径使用左斜杠“/”，注意加以区分。 如果一张图片属于服务器图片或者网络图片，我们必须在img标签里使用网络路径，只有网络路径才可以通过浏览器发送请求，下载该图片到用户的浏览器临时路径中，才可以显示在页面上；如果这张图片在你本地保存，那么你可以直接使用其磁盘路径展示。 例如：我们的项目中一张图片，其磁盘路径为：C:\Program File...
html网页无法打开本地绝对路径下的图片
最新发布
weixin_42142598的博客
06-22 229
背景：通过vscode中的open with live server无法打开html中插入的本地绝对路径下的图片。
html绝对路径图片无法显示
Bald_Creator的博客
03-05 5413
同一张图片，相对路径可以正常显示，绝对路径不行。 <p>相对路径</p><img src="unnamed.jpg" alt="相对路径"> <p>绝对路径</p><img src="D:\IdeaProjects\JavaWeb\src\main\java\com\imooc\others\unnamed.jpg" alt="绝对路径"> 原因：编译器的Web服务器无法访问本地文件。在本地直接打开此index.html，图片可以正常
html中img图片绝对路径时无法正常显示的问题
热门推荐
weixin_52099241的博客
07-13 1万+
这个绝对路径：是指目录下的绝对位置，直接到达的目标位置，通常是从盘符开始的路径。 如果使用这个绝对路径时，首先确认该文件存在并无错误，发现通过vscode或某编译器打开的浏览器不能加载绝对路径图片， 但使用相对路径时，图片正常显示并且从计算机你放的盘，进入这个绝对路径打开html文件时，图片可以正常加载 ...
【Web】在vscode html里的img标签使用绝对路径图片加载不出来
享你所想
04-17 881
在vscode html里的img标签使用绝对路径图片加载不出来
在vscode html里的img标签使用绝对路径图片加载不出来
Rickest_man的博客
03-18 2443
在vscode html里的img标签使用绝对路径图片加载不出来
形考任务二 （1）通过使用 HTML，可以在文档中显示图像，插入一副图像（jpg）插入图片 .zip
11-24
这将在网页中插入一个300px宽、200px高的图片。 二、插入动态图像（gif格式） 插入动态GIF图像与插入静态图像的方式相同，只需将`src`属性指向动态GIF文件即可。浏览器会自动识别并播放GIF动画。 示例代码： ```...
html相对路径问题及图片标签
02-06
在HTML页面中，链接资源（如图片、CSS样式表、JavaScript文件等）时，我们可以使用绝对路径和相对路径。本文将深入探讨“html相对路径问题”以及如何在HTML中正确使用图片标签。 **1. HTML相对路径** 相对路径是相...
HTML中img相对路径的学习测试文件夹demo
03-26
- 使用绝对路径（根相对路径）对于全局资源如logo或通用图片是推荐的，因为它们在网站的任何页面都应能正确显示。 - 相对路径适用于特定页面或局部资源，这样可以减少因文件移动而导致的链接失效。 6. **问题与...
在网页中插入图片--课件.ppt
10-24
在网页设计中，插入图片是不可或缺的一环，它能让页面变得更加生动、有趣，吸引用户的注意力。本课件主要讲解如何在网页中插入图片，适用于扶风小学六年级（上册）的信息技术课程，由史红伟老师指导。下面将详细阐述...
HTML中的base标签使用详解
09-28
HTML中的base标签是用于指定页面中所有相对URL的基础URL，它可以设置默认的链接地址以及默认的目标窗口。...在静态的HTML文件中使用，或者在页面加载完毕后动态设置时配合JavaScript动态加载资源，都是可以考虑的策略。
前端绝对路径不显示图片_Vue cli使用绝对路径引用图片问题的解决_情愫_前端开发者...
weixin_39608680的博客
01-13 348
前言正文：在页面中使用绝对路径可通过在data (){return {src: require('IMAGES/banner.jpg')}}样式里面似乎无法使用绝对路径，除非把图片background: url("/static/images/banner.jpg") no-repeat;但，放到static里面webpack打包后只会把为了兼顾可以把图片background: url("../....
img标签绝对路径无法显示
wdywxwxld的博客
09-13 3696
报错：原报错代码：
css背景图片绝对路径无法显示问题
weixin_42917365的博客
03-26 4363
css背景图片绝对路径无法显示问题 正常的css引入背景图片就不多说了. 正常代码如下图： 没有毛病，此时，我们的教皇就显示出来了，相对路径引入，但是此时如果用绝对路径。 如下图代码： 页面会空空如也，此时不禁会思考哪里出了问题，又继续测试. 如图，我为了测试，写了一个绝对路径的img标签，但是可以正确显示，上面div标签依旧白色，不禁怀疑这是HTML背景图片路径格式的问题，那么应该如何...
后端图片存储绝对路径，Vue前端展示报错
qq_43359830的博客
05-06 1640
因为有个EXCEL导出功能，用户需要知道图片在电脑盘符位置，因此数据库不能直接存项目地址，因此想到一个解决办法 首先在后端指定映射虚拟路径，将盘符路径直接映射到项目路径，用来保证前端vue访问 这样操作后，数据库字段依然是盘符路径，前端朋友提出用require(‘+图片地址’)可做显示，但是需求是列表显示图片，所以否决了（也可能是自己深度不够），所以在列表渲染时加了个方法 将文件名拆分出来，重新拼接项目地址字符串 渲染成功 注：需注意进方法之前，对值判空，否则可能整个列表数据因为单个空值，全部失效
linux常见命令
weixin_42380289的博客
09-24 240
 清除屏幕历史：CLS(windows)、CLEAR（LINUX）  结束运行：CTRL+C  MD (MKDIR) [目录名]：创建目录 //创建WWW目录 MKDIR www  CD (CHDIR) [目录名]：进入目录，可以使用相对目录或绝对目录 //进入当前文件夹下的PAGE目录 CD PAGE //进入上一个文件夹 CD .. //返回根目录 CD \ //进入c:\windows文件夹 CD c:\windows //进入D盘目录 切换磁盘 D:  RD ( RMDIR)
html标签属性大全_HTML中img标签的src属性绝对路径问题解决办法，完全解决
weixin_39629093的博客
12-01 1156
HTML中img标签的src属性绝对路径问题解决办法，完全解决需求：有时候自己的项目img的src路径需要用到本地某文件夹下的图片，而不是直接使用项目根目录下的图片。场景：eclipse，tomcat，html，img，src，java注意：不需要寻找tomcat真实路径下的server.xml去修改，这个地方不需要修改。解决办法：1、在eclipse中找到你的项目发布的tomcat服务器，然后找...
后台nodejs存储图片以及前端显示
仙人掌上的刺猬的博客
02-19 8072
    写毕设时，虽然前端能将图片文件上传到服务器，服务器又将图片文件保存在相应的本地文件夹下，但是在数据库保存的图片路径，绝对路径有问题。 绝对路径： 写成绝对路径，比如 C:\hzpcactus\campus-social\static\kkrtajmWdpK148cu1a_5t4EN.jpg ，界面最后提示Not allowed to load loc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杵意

谢谢金主打赏呀！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值