如何在 Angular 项目中加载图像（和其他资产）？答案

【问题标题】：How to load image (and other assets) in Angular an project?如何在 Angular 项目中加载图像（和其他资产）？
【发布时间】：2017-08-05 05:16:37
【问题描述】：

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

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

在“assets”文件夹中创建了一个“images”文件夹，所以现在我的图片文件夹是src/assets/images

在app.component.html（这是我的应用程序的根）中，我放了

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

当我使用ng serve 查看我的网络应用程序时，图像不显示。

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

编辑：请参阅下面的答案。我的实际图像名称使用了 Angular 不喜欢的空格。当我删除文件名中的空格时，图像正确显示。

【问题讨论】：

是的，你是对的，你从 assets fodler 中给出了正确的路径语法，可能是你的名字不匹配的问题，检查图像是否存在
绝对不是名称不匹配，我最终在src 之外创建了一个public 文件夹并使用<img class="img-responsive" src="../../public/images/myimage.png"> 显示图像
已修复。我的实际图像文件名中有空格，无论出于何种原因，Angular 都不喜欢这样。当我从文件名中删除空格时，assets/images/myimage.png 起作用了。
good :) 顺便说一句，不需要在更新的 cli 中创建额外的公用文件夹，它们已经具有相同的命名 asstes。
我对其他扩展名的文件也有类似的问题（例如.sgf）我想托管这些文件并从应用程序链接到它们，但显然只是将它们放在assets 文件夹中不够。有什么想法吗？

标签： html angular angular-cli

【解决方案1】：

在我的项目中，我在 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}} />

来源：how to bind img src in angular 2 in ngFor?

【讨论】：

你的 app.component.html 和 assets 文件夹在同一级吗？
不，文件夹结构是自动创建的，您应该拥有与我相同的文件夹：project-folder\src\assests\ 和 project-folder\app\app.component.html 如果这有帮助，请点赞。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

'my-image-name.png' 应该是 'myImageName.png'
“我的图片名称.png”应该是“myImageName.png”

如果您将图像放在 assets/img 文件夹中，那么这行代码应该可以在您的模板中使用：

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

如果问题仍然存在，只需检查您的 Angular-cli 配置文件并确保您的资产文件夹已添加到构建选项中。

【讨论】：

[alt] 对于字符串不是必需的，[] 是用于数据绑定的。

【解决方案4】：

具体到 Angular2 到 5，我们可以使用属性绑定来绑定图像路径，如下所示。图片路径用单引号括起来。

示例

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

【讨论】：

src="assets/img/klogo.png" 和 [src]="'assets/img/klogo.png'" 有什么区别？
@gdbj 这里是答案stackoverflow.com/questions/41426974/…
所以基本上，如果我们希望能够使用该方法更改 src，我们使用 [src] 绑定到模型。
感谢 mohit 回答问题。 @gdbj 我希望你现在已经解决了你的困惑。
只想指出未来的读者在 gdbj 的第一条评论中寻找内部单引号。它们在评论字体中比在上面的答案中更难看到，但缺少它们可能会导致一些混乱。（可能取决于您的浏览器，不确定。）

【解决方案5】：

1 .在组件的顶部添加这一行。

declare var require: any

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

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

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

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

【讨论】：

这对于不平坦的文件层次结构树更好。
它还通过为图像生成哈希来解决缓存问题。这在 Angular 8 中完美运行，但在 Angular 9 中，我们需要访问默认属性。 imgname= require("../images/imgname.png").default; 这是老生常谈的方式。您知道导入图像的其他解决方案吗？版本升级后不应更改。

【解决方案6】：

通常“app”是应用程序的根目录——你试过app/path/to/assets/img.png吗？

【讨论】：

angular-cli 将app 和assets 文件夹分别放在src 文件夹下。（对不起，我不确定我应该如何格式化文件夹结构和名称）

【解决方案7】：

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

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

const logo = require('../assets/logo.svg').default as string;

@Component({
    selector: 'app-show-image',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {

  logo = logo;
  constructor() { }
  ngOnInit() { }

}

第二步：在html文件中添加逻辑

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

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

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.

按照建议进行操作 - 通过运行 npm install @types/node 并编辑 tsconfig.app.json 来将 @types/node 类型添加到您的项目中：

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

更多信息 resource

【讨论】：

使用导入对我不起作用： import logoSvg from '../../assets/shared/logo.svg';它找不到类型和它的声明
像上面所说的那样导入图像时出现此错误：src/app/header/header.component.ts:2:14 - 错误 TS2591：找不到名称“需要”。您需要为节点安装类型定义吗？尝试npm i --save-dev @types/node，然后将“节点”添加到 tsconfig 中的类型字段。 2 const logo = require('../assets/logo.svg').default as string;
你必须 install @types/node 并编辑 tsconfig.app.json 如下 "compilerOptions": { "types": ["node"], ... }

【解决方案8】：

对我来说，“我”是“图像”中的资本。这也是 angular-cli 不喜欢的。所以它也是区分大小写的。

像 IIS 这样的一些 web 服务器没有问题，如果 Angular 应用程序托管在 IIS 中，区分大小写不是问题。

【讨论】：

不确定。为什么人们喜欢反对投票。这是我面临的真正问题。并且仍然投了反对票。我想知道为什么我的一些问题没有得到解答，人们不赞成解决它？？

【解决方案9】：

它始终取决于引用静态资源（在本例中为图像）路径的 html 文件在哪里。

示例 A：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

如您所见，yourpage.html 与根目录（src 文件夹）相距一个文件夹，因此它需要一定数量的 ../ 才能回到根目录，然后您就可以从根目录走到图片：

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

示例 B：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

在这里你必须在树中按 2 个文件夹：

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

【讨论】：

默认情况下，Angular 将 src 文件夹与 app 和 assets 文件夹直接放在应该为实际应用程序（所有 html、ts、css 文件）保留的位置中。我很好奇为什么你会将模块放在 src 文件夹之外，而不是应用程序之外。我觉得这违反了文件结构的所有约定。

【解决方案10】：

加载图片时尽量不要留空间。

而不是

<img src='assets/img/myimage.png' alt="">

尝试使用字符串插值或属性绑定来加载源图像作为最佳实践。

【讨论】：