无法在与 Angular 中的组件相同的文件夹中显示静态图像
Can't display static image in the same folder as the component in Angular
在我的组件目录中,我放了一张图片。这是一个很好的、旧的、带有标识的纯 PNG。所以里面有四个文件:
- blobb.png
- blobb.comp.ts
- blobb.comp.html
- blobb.comp.scss
在 HTML 文件中,我在这样的默认 IMG 标签中使用了静态源 link。
<img src="./blobb.png">
我试图按照 this blog 中建议的设置进行操作。目前,我不需要动态图像。静态的就足够了。我的理解是资产文件夹是一个选项,但不是必需的。
当然没有错误,除了 404 Not found。丢失文件的 link 是:
我不确定如何推断是图像文件 link 不正确还是文件无法访问。我该如何进一步诊断?
您需要将图像放在资产文件夹中,然后像这样在您的 html 中引用它
<img src="assets/img/logo.png">
您需要这样做,因为 cli 会编译和捆绑您的应用程序,它也会捆绑您的资产,并且图像的路径可能会在捆绑过程中发生变化。
在我的组件目录中,我放了一张图片。这是一个很好的、旧的、带有标识的纯 PNG。所以里面有四个文件:
- blobb.png
- blobb.comp.ts
- blobb.comp.html
- blobb.comp.scss
在 HTML 文件中,我在这样的默认 IMG 标签中使用了静态源 link。
<img src="./blobb.png">
我试图按照 this blog 中建议的设置进行操作。目前,我不需要动态图像。静态的就足够了。我的理解是资产文件夹是一个选项,但不是必需的。
当然没有错误,除了 404 Not found。丢失文件的 link 是:
我不确定如何推断是图像文件 link 不正确还是文件无法访问。我该如何进一步诊断?
您需要将图像放在资产文件夹中,然后像这样在您的 html 中引用它
<img src="assets/img/logo.png">
您需要这样做,因为 cli 会编译和捆绑您的应用程序,它也会捆绑您的资产,并且图像的路径可能会在捆绑过程中发生变化。