VScode訪問HTML頁(yè)面時(shí)相對(duì)位置正確但圖片卻加載不出來(lái)的解決辦法
問題
利用VSCODE寫代碼的時(shí)候遇到寫完后在file:///D:/xxxx%20Design/project/index.html當(dāng)中訪問不顯示圖片
也就是我訪問open in default browser跳轉(zhuǎn)的路徑資源不被加載進(jìn)去
原因
這是因?yàn)槭褂帽镜匚募窂?(file://) 直接打開HTML文件時(shí)，有時(shí)會(huì)遇到相對(duì)路徑解析的問題。這通常與瀏覽器安全機(jī)制有關(guān)，這些機(jī)制限制了本地文件系統(tǒng)的訪問，其次就是路徑寫錯(cuò)了，多加了個(gè)/
解決方法
方法一（推薦）
然后打開live server試試看（沒有的去下載插件）
運(yùn)行g(shù)o live會(huì)跳轉(zhuǎn)到模擬服務(wù)器端口服務(wù)
例如我的
這里面如果有圖片顯示出來(lái)了，那就說明你的圖片被加載了，沒有問題
此時(shí)就按這個(gè)位置訪問即可
部署之后你后期運(yùn)行l(wèi)ive server即可
方法二
堅(jiān)持使用 file:// 方式打開文件，確保你的路徑絕對(duì)正確
比如我目錄的那樣，把路徑改成img/logo.jpg即可（相對(duì)路徑）
總結(jié)
到此這篇關(guān)于VScode訪問HTML頁(yè)面時(shí)相對(duì)位置正確但圖片卻加載不出來(lái)的文章就介紹到這了,更多相關(guān)VScode訪問HTML頁(yè)面圖片加載不出來(lái)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Prometheus是一個(gè)開源的系統(tǒng)監(jiān)控和報(bào)警系統(tǒng)，通常會(huì)搭配prometheus進(jìn)行監(jiān)控，同時(shí)也支持多種exporter采集數(shù)據(jù)，還支持pushgateway進(jìn)行數(shù)據(jù)上報(bào)，Prometheus性能足夠支撐上萬(wàn)臺(tái)規(guī)模的集群，這篇文章主要介紹了prometheus安裝和使用記錄,需要的朋友可以參考下2023-06-06
Github創(chuàng)建個(gè)人訪問Tokens令牌
這篇文章介紹了Github創(chuàng)建個(gè)人訪問Tokens令牌的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
其實(shí)學(xué)習(xí)軟件測(cè)試沒有大家想象中的那么難，就算是零基礎(chǔ)也不用害怕，學(xué)習(xí)就是一個(gè)從不熟悉到熟悉的過程，那么軟件測(cè)試學(xué)到什么程度,可以開始找工作？下面就來(lái)介紹一下2007-02-02
Ceph集群CephFS文件存儲(chǔ)核心概念及部署使用詳解
這篇文章主要為大家介紹了Ceph集群CephFS文件存儲(chǔ)核心概念及部署使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
火車頭采集正文多圖片如何采集下載（只下載一張圖片的情況該如何處理）
文章采集是站長(zhǎng)常常會(huì)遇到的事，很多人使用火車頭采集器軟件，采集正文中有多個(gè)圖片的時(shí)候如果設(shè)置錯(cuò)誤，會(huì)遇到只下載一張圖片、采集后的正文多張圖片同一個(gè)文件名的情況2023-03-03
分享4個(gè)最受歡迎的大數(shù)據(jù)可視化工具
大數(shù)據(jù)可視化是進(jìn)行各種大數(shù)據(jù)分析解決的最重要組成部分之一。這篇文章主要介紹了4個(gè)最受歡迎的大數(shù)據(jù)可視化工具,需要的朋友可以參考下2019-06-06
人工智能開發(fā)語(yǔ)言排行榜: 不死Java, 不朽C/C++, 新貴Python【推薦】
這篇文章主要介紹了人工智能開發(fā)語(yǔ)言排行榜: 不死Java, 不朽C/C++, 新貴Python，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
5分鐘獲取deepseek api并搭建簡(jiǎn)易問答應(yīng)用
本文主要介紹了5分鐘獲取deepseek api并搭建簡(jiǎn)易問答應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
Notepad++文本比較插件Compare詳解(最新免費(fèi))
Notepad++是一款強(qiáng)大的文本編輯器，它提供了文件對(duì)比功能，可以幫助我們快速找出兩個(gè)文件之間的差異點(diǎn)，這篇文章主要介紹了Notepad++文本比較插件Compare詳解(最新免費(fèi))，感興趣的朋友一起看看吧2024-01-01
HTTP提交方式之PUT詳細(xì)介紹及POST和PUT的區(qū)別
這篇文章主要介紹了HTTP提交方式之PUT詳細(xì)介紹及POST和PUT的區(qū)別,本文簡(jiǎn)潔易懂,需要的朋友可以參考下2014-07-07