我正在使用 vscode 對 HTML 進行編碼，但我遇到了問題。當我想在 HTML 中使用 img 標簽并使用來自 Internet 的影像 URL 時，它可以，但是當我想將本地影像添加到 HTML 時，它不會添加并且影像不會顯示，但我可以看到那里是尚未加載的影像。我同時使用了復制路徑和相對路徑，但都不起作用。我將在下面分享代碼和站點預覽：
正如您在第一張圖片中看到的那樣，使用 URL 是可以的，但使用本地影像則不行。
有人可以幫我解決這個問題嗎？因為我不能為該網站使用任何 png 格式。
如果您需要下面的整個頁面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foals</title>
<h1>Foals</h1>
<nav>
<ul>
<li>
<a href="main page.html">Home </a>
</li>
<li><a href="Songs page.html">Songs</a></li>
<li>
<a href="About page.html">About</a>
</li>
</ul>
</nav>
</head>
<body>
<section>
<img
src="https://i1.sndcdn.com/avatars-SN5qocZtZGc5mtdW-wNfltQ-t500x500.jpg"
width="250"
height="250"
/>
</section>
<h2>Foals in a sight :</h2>
<p id="SummeryInMain">
Foals, stylized as FOALS, are a British rock band formed in Oxford in
2005. The band's current line-up consists of a Greek-born lead vocalist and
guitarist Yannis Philippakis, drummer and percussionist Jack Bevan and
rhythm guitarist Jimmy Smith. They are currently signed to Warner Records,
and have released ix studio albums s to date: Antidotes (2008), Total Life
Forever (2010), Holy Fire (2013), What Went Down (2015), and Everything
Not Saved Will Be Lost – Part 1 & 2 (2019), while their forthcoming
the seventh album, Life Is Yours is scheduled to be released in June 2022.
They have also released one video album, six extended plays and
thirty-three singles. The band have toured internationally for over a
decade, and have featured at many festivals including Glastonbury,
Coachella, and Roskilde.They have won a number of awards, including best
live act at the 2013 Q Awards while producers Alan Moulder and Flood were
awarded 'UK Producer of the Year' for their work on the album Holy Fire.
<br />
<br />
For more info about foals visit <a href="About page.html"> Here</a>
</p>
<h2>Concerts on the way in:</h2>
<table>
<tr>
<td>Date</td>
<td>Place</td>
<td>Ticket</td>
<td>Available on</td>
</tr>
<tr>
<td>2022/4/30</td>
<td>Glastonbury</td>
<td>49£</td>
<td>
<a href="https://www.gigsandtours.com/tour/foals" target="-blank">
Gigsandtours
</a>
</td>
</tr>
</table>
<h4>FOALS on social media:</h4>
<nav>
<!-- Spotify link -->
<a
href="https://open.spotify.com/artist/6FQqZYVfTNQ1pCqfkwVFEa"
target="_blank"
>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6b3KKKOIKpFmjWkESxGgJKwgcXHkx19buzA&usqp=CAU"
width="70"
height="70"
/></a>
<!-- Youtube link -->
<a
href="https://www.youtube.com/channel/UCnnumwiwZd1JWZWpiyqF0gQ"
target="_blank"
>
<img src="youtube.png" />
</a>
</nav>
</body>
</html>
uj5u.com熱心網友回復：
將您的影像標簽更改為：
<img src="../Photos/youtube.png" />
這是它的作業原理
..從您的HTML 檔案檔案夾回傳
/Photos轉到您的照片檔案夾
/youtube.png獲取一個名為youtube.png的檔案
uj5u.com熱心網友回復：
您必須確保要添加的影像與 HTML 檔案位于同一檔案夾中，只有在這種情況下，您才能僅指定影像的名稱而不指定路徑。如果影像在其他檔案夾中，請將其與 HTML 檔案放在相同的位置或寫入完整路徑，如 C:\Users\Username\folder\image.png
uj5u.com熱心網友回復：
圖片的位置是否正確？包括 .jpg 擴展名以及使用 alt 屬性，以便您可以為影像指定替代文本。
uj5u.com熱心網友回復：
- 首先確認影像在您的 html 檔案所在的同一檔案夾中
- 定義img的寬度和高度
- 確認使用正確的影像擴展名，如 .jpg、.png
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493562.html
上一篇：Python-部分掩蓋影像