如何在Angular 2项目中加载图像(和其他资源)？

Question

我对Angular很新,所以我不确定这样做的最佳做法.

我使用angular-cli并ng new some-project生成一个新的应用程序.

在它的"assets"文件夹中创建了一个"images"文件夹,所以现在我的images文件夹是 src/assets/images

在app.component.html(这是我的申请的根),我把

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

当我ng serve查看我的Web应用程序时,图像不会显示.

在Angular应用程序中加载图像的最佳做法是什么？

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

Answer 1

我修好了它.我的实际图像文件名中有空格,无论出于什么原因,Angular都不喜欢它.当我从我的文件名中删除空格时,assets/images/myimage.png工作了.

Answer 2

在我的项目中,我在app.component.html中使用以下语法:

<img src="assets/img/1.jpg" alt="image">

要么

<img src='http://mruanova.com/img/1.jpg' alt='image'>

使用插值绑定属性时,使用[src]作为模板表达式:

<img [src]="imagePath" />

是相同的:

<img src={{imagePath}} />

来源:如何在ngFor中以角度2绑定img src？

Answer 3

Angular-cli默认包含构建选项中的assets文件夹.当我的图像名称有空格或破折号时,我遇到了这个问题.例如 :

• 'my-image-name.png'应为'myImageName.png'
• 'my image name.png'应为'myImageName.png'

如果您将图像放在assets/img文件夹中,那么这行代码应该在您的模板中工作:

<img alt="My image name" src="./assets/img/myImageName.png">

如果问题仍然存在,只需检查您的Angular-cli配置文件,并确保在构建选项中添加了您的assets文件夹.

Answer 4

特定于Angular2到5,我们可以使用属性绑定绑定图像路径,如下所示.图像路径由单引号括起.

示例示例

<img [src]="'assets/img/klogo.png'" alt="image">

Answer 5

1 . 将此行添加到组件的顶部。

declare var require: any

2 . 在您的组件类中添加这一行。

imgname= require("../images/imgname.png");

3. 在 html 页面的 img src 标签中添加这个“imgname”。

   <img src={{imgname}} alt="">

Answer 6

通常情况下,"app"是您的应用程序的根源 - 您尝试过app/path/to/assets/img.png吗？

Answer 7

您可以在 Angular 8+ 中按照以下步骤操作

\n

步骤一：在组件中加载如下图片

\n

const logo = require(\'../assets/logo.svg\').default as string;\n\n@Component({\n    selector: \'app-show-image\',\n    templateUrl: \'./app.component.html\',\n    styleUrls: [\'./app.component.scss\']\n})\nexport class ShowImageComponent implements OnInit {\n\n  logo = logo;\n  constructor() { }\n  ngOnInit() { }\n\n}\n

\n

步骤2：在html文件中添加逻辑

\n

<img [src]="logo" [alt]="\'logo\'">\n

\n

如果在没有进一步配置的情况下启动，您将看到一个奇怪的错误：

\n

ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name \'require\'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.\n

\n

按照建议 \xe2\x80\x93@types/node通过运行 npm 将类型添加到您的项目install @types/node并编辑tsconfig.app.json设置：

\n

"compilerOptions": {\n    "types": ["node"],\n    ...\n}\n

\n

欲了解更多信息\n资源

\n