typescript Angular 4 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47945942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 display images
提问by Mohammed
I am trying to add an image with angular 4 ... but without success
我正在尝试添加角度为 4 的图像......但没有成功
My folders :
我的文件夹：
src
源文件
- app
- job
job.component.css
job.component.html
job.component.specs.ts
job.component.ts
- assets
- images
play-3.png
favicon.ico
What I have tried :
我尝试过的：
<a href="ta_page" ><img src="../assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="../../assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="../../../assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
<a href="ta_page" ><img src="assets\images\play-3.png"/></a>
<a href="ta_page" ><img src="images/play-3.png"/></a>
<a href="ta_page" ><img src="favicon.ico"/></a>
<a href="ta_page" ><img src="./play-3.png"/></a>
<a href="ta_page" ><img src="app/assets/images/play-3.png"/></a>
<img ng-src="assets/images/play-3.png">
<img ng-src="images/play-3.png">
error :
错误 ：
Cannot GET /play-3.png
If I put favicon it works ....
如果我放了 favicon，它就可以工作....
I tried to put my images into /src, src/assets, src/assets/images ...
我试图将我的图像放入 /src、src/assets、src/assets/images ...
Edit :
编辑 ：
my .angular-cli.json
我的 .angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
Solution : - Restart ng serve after pgn upload
解决方案： - 在 pgn 上传后重新启动 ng serve
回答by Enrique Rubio Sanchez
In angular-cli.json you should have this:
在 angular-cli.json 你应该有这个：
> "apps": [
> {
> "root": "src",
> "outDir": "dist",
> "assets": [
> "assets",
> "favicon.ico"
> ]
assets is the folder to static files, ok,now you have to put the images in a folder into assets /src/assets/images/play-3.png, finally you can access to image, from you app.component.html, with:
assets是静态文件的文件夹，好的，现在你必须把文件夹中的图像放到assets /src/assets/images/play-3.png中，最后你可以从app.component.html访问图像，和：
<img src="/images/play-3.png"/></a>
回答by Boago
with your folder structure src/assets/images where your images are in the images folder, this should work:
使用您的文件夹结构 src/assets/images 您的图像在图像文件夹中，这应该可以工作：
As long as you have this declaration in your angular-cli.json
只要你的 angular-cli.json 中有这个声明
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ]
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ]
