如何在Angular项目中加载图像(和其他资产)? [英] How to load image (and other assets) in Angular an project?

问题描述

我对Angular还是很陌生，所以我不确定这样做的最佳实践.

I'm pretty new to Angular so I'm not sure the best practice to do this.

我使用angular-cli和ng new some-project生成了一个新应用.

I used angular-cli and ng new some-project to generate a new app.

在其中，在资产"文件夹中创建了一个图像"文件夹，所以现在我的图像文件夹为src/assets/images

In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images

在app.component.html(这是我的应用程序的根目录)中，放置

In app.component.html (which is the root of my application), I put

<img class="img-responsive" src="assets/images/myimage.png">

当我执行ng serve来查看我的Web应用程序时，该图像不显示.

When I do ng serve to view my web application, the image does not display.

在Angular应用程序中加载图像的最佳实践是什么?

What is the best practice to load up images in an Angular application?

请参见下面的答案.我的实际图像名称使用的是Angular不喜欢的空格.当我删除文件名中的空格时，图像正确显示.

See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.

推荐答案

我已修复它.我的实际图像文件名中带有空格，而无论出于何种原因，Angular都不喜欢.当我从文件名中删除空格时，assets/images/myimage.png起作用了.

I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.

这篇关于如何在Angular项目中加载图像(和其他资产)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！