在 Angular 2 的图像标签中渲染静态图像答案

【问题标题】：Render static image in image tag in Angular 2在 Angular 2 的图像标签中渲染静态图像
【发布时间】：2018-02-21 23:33:31
【问题描述】：

我想将图像附加到角度 2 的图像标签上。

我的应用程序具有以下结构，

在 choice.Component.html 视图中，我想在图像标记中显示 UserDefaultImage.png 图像。

我尝试了下面的事情，但没有运气。

<img src="../images/DefaultUserImage.png" />
<img src="./images/DefaultUserImage.png" />
<img src="/images/DefaultUserImage.png" />
<img src="app/images/DefaultUserImage.png" />
<img src="/app/images/DefaultUserImage.png" />

我需要添加什么路径才能使其工作？

【问题讨论】：

你也试过 Tic_tac_toe.png 吗？
这也不行。
您是在使用 Angular cli，还是设置了自定义构建配置？

标签： angular typescript angular2-template angular2-forms angular2-directives

【解决方案1】：

当你移动到浏览器并检查元素时，你会发现像这样的图像路径

http://localhost:3000/images/DefaultUserImage.png

您应该将您的图像文件夹移动到资产文件夹并使用它

<img src="assets/images/DefaultUserImage.png" >

【讨论】：

【解决方案2】：

发件人：https://angular.io/guide/quickstart

资产/* 一个文件夹，您可以在其中放置图像和其他任何内容，以便在构建应用程序时批量复制。

成功了：<img src="assets/images/test.png" />

【讨论】：

这只适用于 Angular cli 项目，或者如果构建是这样配置的。对于任何项目，它都不能神奇地开箱即用