html绝对路径图片无法显示

同一张图片,相对路径可以正常显示,绝对路径不行。

<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绝对路径时,如果图片的路径不正确,图片无法加载出来的。这可能是因为路径设置错误导致的。相对路径是相对于当前编辑的HTML文件所在的位置,而绝对路径是指图片在文件系统中的完整路径。所以当我们使用绝对路径时,需要确保路径是正确的,并且在文件系统中存在该图片。 举个例子,如果我们将图片放在img文件夹下,当前编辑的HTML文件与img文件夹在同一级目录下,那么我们可以使用相对路径来引用图片,如下所示: ``` <img src="img/imagename.jpg" alt="图片"> ``` 这样就可以成功加载出图片。但是如果我们使用绝对路径,比如: ``` <img src="D:/path/to/image/imagename.jpg" alt="图片"> ``` 这样的路径是不会加载出图片的,因为这是一个在文件系统中的具体路径,并不是HTML文件可以访问的路径。所以在编写HTML代码时,我们要注意使用正确的路径来引用图片,以确保图片能够正常加载。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [html图片加载不出来,图片相对路径问题](https://blog.csdn.net/m0_57207195/article/details/123612294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [html绝对路径图片无法显示](https://blog.csdn.net/BWface/article/details/114417157)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [用node开发应用程序,对nodejs+express工程打包封装,通常公司产品化的软件系统,需要标识为公司的logo和...](https://download.csdn.net/download/Thor027/88284823)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值