VScode访问HTML页面时相对位置正确但图片却加载不出来的解决办法
更新时间：2024年10月17日 10:34:17 作者：【D＇accumulation】
这篇文章主要介绍了VScode访问HTML页面时相对位置正确但图片却加载不出来的解决办法,在使用VSCode编写代码并通过本地文件路径(file://)打开HTML时,可能会因浏览器安全限制或路径错误而无法正确加载图片,文中通过图文介绍的非常详细,需要的朋友可以参考下
问题
利用VSCODE写代码的时候遇到写完后在file:///D:/xxxx%20Design/project/index.html当中访问不显示图片
也就是我访问open in default browser跳转的路径资源不被加载进去
原因
这是因为使用本地文件路径 (file://) 直接打开HTML文件时，有时会遇到相对路径解析的问题。这通常与浏览器安全机制有关，这些机制限制了本地文件系统的访问，其次就是路径写错了，多加了个/
解决方法
方法一（推荐）
然后打开live server试试看（没有的去下载插件）
运行go live会跳转到模拟服务器端口服务
例如我的
这里面如果有图片显示出来了，那就说明你的图片被加载了，没有问题
此时就按这个位置访问即可
部署之后你后期运行live server即可
方法二
坚持使用 file:// 方式打开文件，确保你的路径绝对正确
比如我目录的那样，把路径改成img/logo.jpg即可（相对路径）
总结
到此这篇关于VScode访问HTML页面时相对位置正确但图片却加载不出来的文章就介绍到这了,更多相关VScode访问HTML页面图片加载不出来内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Prometheus是一个开源的系统监控和报警系统，通常会搭配prometheus进行监控，同时也支持多种exporter采集数据，还支持pushgateway进行数据上报，Prometheus性能足够支撑上万台规模的集群，这篇文章主要介绍了prometheus安装和使用记录,需要的朋友可以参考下2023-06-06
这篇文章介绍了Github创建个人访问Tokens令牌的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
其实学习软件测试没有大家想象中的那么难，就算是零基础也不用害怕，学习就是一个从不熟悉到熟悉的过程，那么软件测试学到什么程度,可以开始找工作？下面就来介绍一下2007-02-02
这篇文章主要为大家介绍了Ceph集群CephFS文件存储核心概念及部署使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
火车头采集正文多图片如何采集下载（只下载一张图片的情况该如何处理）
文章采集是站长常常会遇到的事，很多人使用火车头采集器软件，采集正文中有多个图片的时候如果设置错误，会遇到只下载一张图片、采集后的正文多张图片同一个文件名的情况2023-03-03
大数据可视化是进行各种大数据分析解决的最重要组成部分之一。这篇文章主要介绍了4个最受欢迎的大数据可视化工具,需要的朋友可以参考下2019-06-06
人工智能开发语言排行榜: 不死Java, 不朽C/C++, 新贵Python【推荐】
这篇文章主要介绍了人工智能开发语言排行榜: 不死Java, 不朽C/C++, 新贵Python，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
本文主要介绍了5分钟获取deepseek api并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
Notepad++文本比较插件Compare详解(最新免费)
Notepad++是一款强大的文本编辑器，它提供了文件对比功能，可以帮助我们快速找出两个文件之间的差异点，这篇文章主要介绍了Notepad++文本比较插件Compare详解(最新免费)，感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了HTTP提交方式之PUT详细介绍及POST和PUT的区别,本文简洁易懂,需要的朋友可以参考下2014-07-07
最新评论