使用 require 在 Angular 11 应用程序中加载图像答案

【问题标题】：Using require to load images in Angular 11 app使用 require 在 Angular 11 应用程序中加载图像
【发布时间】：2021-09-01 04:41:23
【问题描述】：

我试图通过将<img src="../xxx/yyy" 添加到 Html 中以传统方式在 Angular 11 应用程序中加载一些图像，但它返回 404 错误。（我确定路径没问题）。之后，我尝试了 require 解决方案，但又失败了。这就是我使用require的方式。有什么想法和解决方案吗？

打字稿

declare var require: any;
imgname= require("../../assets/images/Component95_1.png").default;

HTML

<img src={{imgname}}>

【问题讨论】：

静态图片还是来自API？
不，它们不是来自 Api

标签： html angular image require

【解决方案1】：

您需要在src 中创建一个assets 目录。使用完整路径，您可以获得图像。 example

我建议通过输入指令设置src：<img [src]="imgname">

【讨论】：

你试过这样assets/...的路径吗？
它让我无法解析路径..我的意思是在我使用 require 的情况下。没有要求，该解决方案再次给我 404