在浏览器中显示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标签而不是图片

回答

相关问题