无法在与Angular中的组件相同的文件夹中显示静态图像 [英] Can't display static image in the same folder as the component in Angular
问题描述
在组件的目录中，放置了一个图像.这是一个很好的，古老的，带有徽标的普通PNG.因此，其中有四个文件:
In the directory of my component, I've put an image. It's a good, old, plain PNG with a logotyp. So there are four files in there:
- blobb.png
- blobb.comp.ts
- blobb.comp.html
- blobb.comp.scss
在HTML文件中，我在这样的默认IMG标签中使用了静态源链接.
In the HTML file, I used a static source link in a default IMG tag like this.
<img src="./blobb.png">
我试图遵循此博客中建议的设置.目前，我不需要动态图像.静态的就足够了.我的理解是资产文件夹是一个选项，但不是必需的.
I was trying to follow the setup suggested in this blog. At the moment, I have no need for dynamic images. The static ones will suffice. My understanding's that assets folder is an option but not required.
当然没有错误，除了"404 Not Found".到丢失文件的链接是:
There's no error, except for the 404 Not found, of course. The link to the missing file is:
我不确定如何推断到图像文件的链接有误还是无法访问该文件.我该如何进一步诊断?
I'm not sure how to deduce if it's a matter of incorrect link to the image file or if the file isn't accessible. How can I diagnoze it furhter?
推荐答案
您需要将图像放在资产文件夹中，然后像这样在html中引用它
You need to put the image in assets folder and then reference it in your html like this
<img src="assets/img/logo.png">
您需要执行此操作，因为cli会编译并捆绑您的应用程序，它也会同时捆绑您的资产，并且在捆绑过程中映像路径可能会更改.
You need to do this, as the cli compiles and bundles your application it also bundles your assets too and path to image may change during bundling process.
请参见此链接，以获取例子
这篇关于无法在与Angular中的组件相同的文件夹中显示静态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
