HTML 圖像不顯示，而 src url 工作

Question

<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">

那不顯示圖像，只顯示alt。 但如果我去

file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg

在瀏覽器中，圖像顯示。

我現在在 Windows 機器上的 xampp 上托管它。

我已經嘗試過不同的瀏覽器，並且有和沒有 %20 的空間，但我知道 with 是正確的方法。（實際上它適用於兩者）

而且我知道圖像只會在托管它的機器上可見，這不是問題。

Answer 1

您的文件需要位於 www 目錄中。 例如，如果您在 Windows 上使用 wamp 服務器，則應該找到 j3evn.jpg，

C:/wamp/www/img/j3evn.jpg

你可以通過 html 訪問它

<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">

查找屬於您的 Web 服務器的 www、public_html 或 html 文件夾。 將所有文件和資源放在該文件夾中。

希望這可以幫助！

Answer 2

即使將它們放在正確的文件夾中，我的圖像也沒有顯示，問題是它們沒有正確的權限，我將權限更改為讀寫執行。 我使用了 chmod 777 image.png。 然后一切正常，圖像開始顯示。 :)

Answer 3

由於您使用帶有“file://”的 URL 鏈接，因此它不會起作用。 相反，您應該將您的目錄與您的 HTML 文件相匹配，例如：

可以說我的文件放在：

C:/myuser/project/file.html

我想要的圖像在：

C:/myuser/project2/image.png

我所要做的就是以這種方式匹配目錄：

<img src="../project2/image.png" />

Answer 4

您可以嘗試將圖像放在源目錄中。 您可以通過用src="../imagenamehere.fileextension替換文件路徑來鏈接它在您的情況下，j3evn.jpg。

Answer 5

我的問題不包括圖像名稱之前的 ../

background-image: url("../image.png");

Answer 6

我的問題是我在路徑前面有/ （資產是一個目錄），例如：

<img src="assets/images/logo.png>"是正確的，而

<img src="/assets/images/logo.png>"返回錯誤。

Answer 7

將圖像文件夾的名稱更改為 img ，然后使用 HTML 代碼

Answer 8

不是這個特定問題的直接答案。 但是，如果您像這樣正確地提供圖像地址，並且想知道為什么在輸出中看不到圖像，

<img src ="../../../public/image.jpg"/> 

直接給出圖像名稱，如

<img src="image.jpg"/>

或者，如果您在public中有一個文件夾，比如說圖標，就給它

<img src="/icons/logo.jpg"/>

這是因為，React 已經期望您將所有圖像都放在公共文件夾中。 所以你不需要明確地給它。

Answer 9

簡單的解決方案是：

1.將圖像文件和HTML文件保存在同一個文件夾中。

2.code: <img src="Desert.png"> // 你的圖片名稱。

3.將文件夾保存在D盤。

將文件夾保留在桌面（即 C 盤）上，您可能會遇到權限問題。

Answer 10

在你的 angular.json 文件夾結構應該是這樣的

"assets": [             
  "src/assets",
  "src/favicon.ico"
],

不是這個

"assets": [     
  "src/favicon.ico",
  "src/assets",
],

這解決了我的問題。