VScode訪問(wèn)HTML頁(yè)面時(shí)相對(duì)位置正確但圖片卻加載不出來(lái)的解決辦法
問(wèn)題
利用VSCODE寫(xiě)代碼的時(shí)候遇到寫(xiě)完后在file:///D:/xxxx%20Design/project/index.html當(dāng)中訪問(wèn)不顯示圖片
也就是我訪問(wèn)open in default browser跳轉(zhuǎn)的路徑資源不被加載進(jìn)去
原因
這是因?yàn)槭褂帽镜匚募窂?(file://) 直接打開(kāi)HTML文件時(shí)，有時(shí)會(huì)遇到相對(duì)路徑解析的問(wèn)題。這通常與瀏覽器安全機(jī)制有關(guān)，這些機(jī)制限制了本地文件系統(tǒng)的訪問(wèn)，其次就是路徑寫(xiě)錯(cuò)了，多加了個(gè)/
解決方法
方法一（推薦）
然后打開(kāi)live server試試看（沒(méi)有的去下載插件）
運(yùn)行g(shù)o live會(huì)跳轉(zhuǎn)到模擬服務(wù)器端口服務(wù)
例如我的
這里面如果有圖片顯示出來(lái)了，那就說(shuō)明你的圖片被加載了，沒(méi)有問(wèn)題
此時(shí)就按這個(gè)位置訪問(wèn)即可
部署之后你后期運(yùn)行l(wèi)ive server即可
方法二
堅(jiān)持使用 file:// 方式打開(kāi)文件，確保你的路徑絕對(duì)正確
比如我目錄的那樣，把路徑改成img/logo.jpg即可（相對(duì)路徑）
總結(jié)
到此這篇關(guān)于VScode訪問(wèn)HTML頁(yè)面時(shí)相對(duì)位置正確但圖片卻加載不出來(lái)的文章就介紹到這了,更多相關(guān)VScode訪問(wèn)HTML頁(yè)面圖片加載不出來(lái)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解使用內(nèi)網(wǎng)穿透工具Ngrok代理本地服務(wù)
本文主要介紹了使用內(nèi)網(wǎng)穿透工具Ngrok代理本地服務(wù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
最近需要打開(kāi)文件后綴名為.xmind的文件，所以下載了Xmind8?。打開(kāi)以后想要導(dǎo)出，奈何普通版本只能導(dǎo)出.txt文本文檔，所以就總結(jié)出了這篇文章，對(duì)Xmind8?Pro破解方法感興趣的朋友跟隨小編一起看看吧2021-05-05
ollama搭建本地ai大模型并應(yīng)用調(diào)用的操作方法
這篇文章詳細(xì)介紹了如何下載、安裝和使用OLLAMA大模型,包括啟動(dòng)配置模型、配置UI界面、搭建本地知識(shí)庫(kù)、配置文件開(kāi)發(fā)、環(huán)境變量配置以及通過(guò)Golang實(shí)現(xiàn)接口調(diào)用的示例2024-11-11
這篇文章主要介紹了VScode中配置使用fortran的方法,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-07-07
Vscode中l(wèi)aunch.json與tasks.json文件的詳細(xì)介紹
在VSCode中,launch.json和tasks.json作為兩個(gè)重要的配置文件,能夠幫助開(kāi)發(fā)者實(shí)現(xiàn)調(diào)試和任務(wù)運(yùn)行的自動(dòng)化配置,下面這篇文章主要給大家介紹了關(guān)于Vscode中l(wèi)aunch.json與tasks.json文件的相關(guān)資料,需要的朋友可以參考下2024-07-07
vscode輸入npm?install報(bào)錯(cuò):node-sass@8.0.0?install:'node?
這篇文章主要給大家介紹了關(guān)于vscode輸入npm?install報(bào)錯(cuò):node-sass@8.0.0?install:'node?scripts/install.js'的解決方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Git是一個(gè)很強(qiáng)大的分布式版本控制系統(tǒng)。它不但適用于管理大型開(kāi)源軟件的源代碼,管理私人的文檔和源代碼也有很多優(yōu)勢(shì)。 本文主要介紹了全網(wǎng)最全Git命令手冊(cè)，感興趣的可以了解一下2021-12-12
ABAP?ALV最常規(guī)寫(xiě)法及常用功能詳解
這篇文章主要為大家介紹了ABAP?ALV最常規(guī)寫(xiě)法及常用功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了5G頻段闡述方法的相關(guān)資料,需要的小伙伴可以參考下面2021-08-08
Burp Suite是用于攻擊web應(yīng)用程序的集成平臺(tái)，接下來(lái)通過(guò)本文給大家介紹Burpsuite入門(mén)及使用詳細(xì)教程，感興趣的朋友一起看看吧2021-09-09