如何在 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.

它在assets"文件夹中创建了一个images"文件夹，所以现在我的图像文件夹是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屋！