如何在 Angular 7 项目中使用 <img> 标签渲染图像？答案

【问题标题】：How to render images using <img> tag in angular 7 project?如何在 Angular 7 项目中使用 <img> 标签渲染图像？
【发布时间】：2020-11-09 22:46:36
【问题描述】：

我需要使用以下信息在 Angular 7 应用程序中显示图像：

公司{ 标志：'https://static.wixstatic.com/媒体/dc0d61_854a54df0f1049bcbb20e2f9a64236eb.png/v1/填充/w_112，h_112，al_c，usm_0.66_1.00_0.01/dc0d61_854a54df0f1049bcbb20e.png'2f }

据我了解，标志值必须在模板文件中图像标签的 src 属性中提供，如下所示：

<img width="300" alt="Company Logo" src="{{company.logo}}"/>

第一个问题：这是在 angular7 应用中渲染图像的正确方法吗？

第二个问题：当我访问给定的 http 地址时，我是否应该看到需要显示的图像（我不是，而是在尝试访问此 src 地址时收到 404 Not Found 错误）

P.S 我在上面尝试时没有显示图像

【问题讨论】：

您确认这是您使用的正确网址吗？所有的空格和逗号看起来有点奇怪......此外，您必须为源使用属性绑定[src]="company.logo"
当我通过删除空格尝试地址时，它仍然给出相同的 404 Not Found 错误

标签： html image angular7 src

【解决方案1】：

为了渲染图像，图像应放置在应用程序的 assets 文件夹中。如果图像保持不变则休息，是的，这是在 Angular7 应用程序中呈现图像的正确方法。

尝试将图像放在资产文件夹中并更新路径。它会起作用的。

【讨论】：