在瀏覽器中顯示HTML標籤而不是圖片

首先，對不起，如果是非常簡單的問題，是我第二個月學習JS。在瀏覽器中顯示HTML標籤而不是圖片

我上傳到我的網站的圖像picture here顯示爲像用戶的頭像圖像，但它只顯示HTML標籤而不是圖像本身，實際上HTML指示正確的鏈接圖像在我的計算機文件夾中，但不顯示任何圖像，只有HTML標籤..

這是展示形象的說明：

<div class="image_for_edit" *ngIf="user.image && user.image != 'null'"> 
     <img src="{{url + "get-image-user/" + user.image}}" styles="width: 50px;"> 
</div>

然後，而不是圖像，瀏覽器顯示這一點：

<img src="http://localhost:3977/api/get-image-user/Gja384icVy1nFy1tp6ZvVzEK.jpg" 
styles="width: 50px;">

爲什麼會發生這種情況？不要在MongoDB或控制檯上給出任何錯誤，文件上傳到正確的文件夾，似乎一切正常，只有這個問題。而且我無法找到我整天在互聯網上搜索的任何錯誤，爲什麼可以使用Angular，但仍未找到解決方案。

希望有人能幫助我一點解決這個..

來源

2017-09-06 VictorN

您需要放出一個空白的圖片標記，然後在上傳圖片後用源代碼填充它。 – louis12356

你能舉個例子嗎？ – VictorN

當您第一次加載頁面時，它將顯示如下所示的空白圖片：。當某人上傳圖片時，您通過id設置img的src。 – louis12356

您應該使用ng-src圖像標籤，而不是src。還要注意，你應該在雙引號屬性值中使用單引號。

<div class="image_for_edit" *ngIf="user.image && user.image != 'null'"> 
    <img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;"> 
</div>

來源

2017-09-06 17:41:55

謝謝，但不工作，現在顯示 – VictorN

檢查您的報價。此外，我也意識到，我之前並不需要{{}}，因此我編輯了答案。 –

它在控制檯中給出錯誤：未捕獲的錯誤：模板解析錯誤：無法綁定到'ng-src'，因爲它不是'img'的已知屬性。（」 – VictorN

在Angular2：

<img [src]="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" />

在Angular1：

<img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" />

來源

2017-09-06 17:43:19

雙方給出錯誤控制檯 – VictorN

你可以嘗試這樣的。

在src標記中，給出你的文件夾路徑。

<img src="api/get-image-user/{{ user.image }}" alt="" styles="width: 50px;"/>

來源

2017-09-06 17:55:16

然後給出了404錯誤 – VictorN

這意味着文件未找到。 –

我認爲你需要更正您在SRC標籤文件路徑。 –

在瀏覽器中顯示HTML標籤而不是圖片

回答

相關問題