Question

首先，抱歉，如果这是一个非常简单的问题，那是我第二个月学习JS。

我将图片上传到我的网站picture here，以显示用户的头像图片，但它只显示HTML标签而不是图片本身，实际上HTML指示我的计算机文件夹中的图像链接正确但不要' t显示任何图像，只显示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，但仍然找不到解决方案。

希望有人可以帮我解决一下......

Answer 1

您应该将ng-src用于图片代码而不是src。另请注意，您应该使用单引号＆＃39;在双引号属性值中。

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

Answer 2

在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;" />

Answer 3

你可以这样试试。

在src标签中，给出你的文件夹路径。

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

Angular在浏览器中显示HTML标签而不是图像

3 个答案: