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页面图片加载不出来内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了使用内网穿透工具Ngrok代理本地服务，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
最近需要打开文件后缀名为.xmind的文件，所以下载了Xmind8 。打开以后想要导出，奈何普通版本只能导出.txt文本文档，所以就总结出了这篇文章，对Xmind8 Pro破解方法感兴趣的朋友跟随小编一起看看吧2021-05-05
这篇文章详细介绍了如何下载、安装和使用OLLAMA大模型,包括启动配置模型、配置UI界面、搭建本地知识库、配置文件开发、环境变量配置以及通过Golang实现接口调用的示例2024-11-11
这篇文章主要介绍了VScode中配置使用fortran的方法,本文通过图文实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下2021-07-07
Vscode中launch.json与tasks.json文件的详细介绍
在VSCode中,launch.json和tasks.json作为两个重要的配置文件,能够帮助开发者实现调试和任务运行的自动化配置,下面这篇文章主要给大家介绍了关于Vscode中launch.json与tasks.json文件的相关资料,需要的朋友可以参考下2024-07-07
vscode输入npm install报错:node-sass@8.0.0 install:'node
这篇文章主要给大家介绍了关于vscode输入npm install报错:node-sass@8.0.0 install:'node scripts/install.js'的解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-02-02
Git是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势。 本文主要介绍了全网最全Git命令手册，感兴趣的可以了解一下2021-12-12
这篇文章主要为大家介绍了ABAP ALV最常规写法及常用功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了5G频段阐述方法的相关资料,需要的小伙伴可以参考下面2021-08-08
Burp Suite是用于攻击web应用程序的集成平台，接下来通过本文给大家介绍Burpsuite入门及使用详细教程，感兴趣的朋友一起看看吧2021-09-09
最新评论