Angular可以在资源文件夹之外提供图像吗

Question

我在Angular上建立了一个项目，该项目将在设计中包含大量图像。我想知道是否有可能将每个组件使用的图像保留在组件内，而不必从资产文件夹中获取每个图像。

我想知道是否可以配置Angular来容纳并提供该组件中某个组件使用的图像。

查看图片以进行澄清：

Answer 1

  

资产包含在构建应用程序时按原样复制的图像文件和其他资产文件。

但是，可以！

但是为此，您需要手动要求组件文件中的每个图像，并在这样的模板中动态使用-

declare var require: any
myImage = require('./myImage.png');

<img [src]="myImage" />

默认情况下，Angular CLI对assets文件夹中的静态数据（如图像/字体/ Css文件等）进行了配置。

但是，如果您想从那里之外使用一些静态数据，则需要像上面提到的那样。

PS ：不确定在构建时angular是否会获取所有静态数据，例如组件级别的图像。但应该在ng serve

中工作

Answer 2

是的。您可以将图像放在组件文件夹中，并从组件文件访问它们。只是您必须在组件或HTML文件中提供图像文件的正确路径

示例：在组件文件中，直接通过名称访问文件，而无需任何文件夹路径fileName.jpeg

Answer 3

非常感谢@PardeepJain我已经能够按照您的指示进行操作。

但这是我在其他情况下所做的：

声明var require：任何;
声明var img：any;
导出类IndexNavComponents { enter code here img = require（'./ myImage.png'）; }