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

Posted 2023-02-24

【中文标题】使用 require 在 Angular 11 应用程序中加载图像

【英文标题】：Using require to load images in Angular 11 app

【发布时间】：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

【参考方案1】：

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

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

【讨论】：

你试过这样assets/...的路径吗？

它让我无法解析路径..我的意思是在我使用 require 的情况下。没有要求，该解决方案再次给我 404