使用VScode访问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即可(相对路径)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值