Html 如何在 Angular 项目中加载图像(和其他资产)?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/42793292/
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
How to load image (and other assets) in Angular an project?
提问by user3183717
I'm pretty new to Angular so I'm not sure the best practice to do this.
我对 Angular 很陌生,所以我不确定这样做的最佳实践。
I used angular-cli and ng new some-project
to generate a new app.
我使用了 angular-cli 并ng new some-project
生成了一个新应用程序。
In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images
在它的“资产”文件夹中创建了一个“图像”文件夹,所以现在我的图像文件夹是 src/assets/images
In app.component.html
(which is the root of my application), I put
在app.component.html
(这是我的应用程序的根),我把
<img class="img-responsive" src="assets/images/myimage.png">
When I do ng serve
to view my web application, the image does not display.
当我ng serve
查看我的 Web 应用程序时,图像不显示。
What is the best practice to load up images in an Angular application?
在 Angular 应用程序中加载图像的最佳实践是什么?
EDIT: 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 不喜欢的空格。当我删除文件名中的空格时,图像显示正确。
采纳答案by user3183717
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 都不喜欢这样。当我从文件名中删除空格时,assets/images/myimage.png
工作正常。
回答by mruanova
In my project I am using the following syntax in my app.component.html:
在我的项目中,我在 app.component.html 中使用以下语法:
<img src="assets/img/1.jpg" alt="image">
or
或者
<img src='http://mruanova.com/img/1.jpg' alt='image'>
use [src] as a template expression when you are binding a property using interpolation:
当您使用插值绑定属性时,使用 [src] 作为模板表达式:
<img [src]="imagePath" />
is the same as:
是相同的:
<img src={{imagePath}} />
回答by jmuhire
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :
默认情况下,Angular-cli 在构建选项中包含资产文件夹。当我的图像名称有空格或破折号时,我遇到了这个问题。例如 :
- 'my-image-name.png' should be 'myImageName.png'
- 'my image name.png' should be 'myImageName.png'
- 'my-image-name.png' 应该是 'myImageName.png'
- '我的图像名称.png'应该是'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
如果您将图像放在 assets/img 文件夹中,那么这行代码应该可以在您的模板中使用:
<img alt="My image name" src="./assets/img/myImageName.png">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
如果问题仍然存在,只需检查您的 Angular-cli 配置文件并确保您的资产文件夹已添加到构建选项中。
回答by Bhuwan Maharjan
Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.
特定于 Angular2 到 5,我们可以使用属性绑定来绑定图像路径,如下所示。图像路径用单引号括起来。
Sample example
示例
<img [src]="'assets/img/klogo.png'" alt="image">
<img [src]="'assets/img/klogo.png'" alt="image">
回答by chrispy
Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png
?
通常“应用程序”是您的应用程序的根 - 您尝试过app/path/to/assets/img.png
吗?
回答by Bheem Singh
1 . Add this line on top in component.
1 . 将此行添加到组件的顶部。
declare var require: any
2 . add this line in your component class.
2 . 在您的组件类中添加这一行。
imgname= require("../images/imgname.png");
add this 'imgname' in img src tag on html page.
<img src={{imgname}} alt="">
在 html 页面的 img src 标签中添加这个“imgname”。
<img src={{imgname}} alt="">
回答by Anonymous Creator
for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.
对我来说,“我”是“图像”中的资本。这也是 angular-cli 不喜欢的。所以它也是区分大小写的。
回答by sznczy
It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).
它始终取决于引用静态资源路径的 html 文件(在本例中为图像)的位置。
Example A:
示例 A:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yourpage.html
As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../to go back to the root then you can walk to the image from root:
如您所见, yourpage.html 与根目录(src 文件夹)相距一个文件夹,因此它需要一定数量的../才能返回根目录,然后您可以从根目录走到图像:
<img class="img-responsive" src="../assests/images/myimage.png">
Example B:
示例 B:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yoursubmodule
|__yourpage.html
Here you have to go u in the tree by 2 folders:
在这里,您必须在树中找到 2 个文件夹:
<img class="img-responsive" src="../../assests/images/myimage.png">