无法在与 Angular 中的组件相同的文件夹中显示静态图像

Can't display static image in the same folder as the component in Angular

在我的组件目录中,我放了一张图片。这是一个很好的、旧的、带有标识的纯 PNG。所以里面有四个文件:

在 HTML 文件中,我在这样的默认 IMG 标签中使用了静态源 link。

<img src="./blobb.png">

我试图按照 this blog 中建议的设置进行操作。目前,我不需要动态图像。静态的就足够了。我的理解是资产文件夹是一个选项,但不是必需的。

当然没有错误,除了 404 Not found。丢失文件的 link 是:

https://localhost:44385/logo02.png

我不确定如何推断是图像文件 link 不正确还是文件无法访问。我该如何进一步诊断?

您需要将图像放在资产文件夹中,然后像这样在您的 html 中引用它

<img src="assets/img/logo.png">

您需要这样做,因为 cli 会编译和捆绑您的应用程序,它也会捆绑您的资产,并且图像的路径可能会在捆绑过程中发生变化。

看到这个link for an example