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