自定义模块内部资源的路径

Question

我有一个模块：

Obs .:不是根模块

我的模块├──零件| └──我的组件| └──my-component.html└──图像└──my-image.png

我正在尝试在“ my-component.html”中将路径设置为“ my-image.png”。

我已经尝试过以下方法：

img src =“ ./ images / my-image.png”img src =“ ../ images / my-image.png”img src =“ / images / my-image.png”

但是当我投放我的应用程序时，angular将我的路径解析为：

本地主机：4200 /./ images / my-image.png本地主机：4200 /../ images / my-image.png本地主机：4200 / images / my-image.png

我想让angular解析相对于我的html文件所在模块的路径。我该怎么办？

Answer 1

您可以通过在angular.json中添加路径来实现这一点，如下所示

 "assets": [
              "src/favicon.ico",
              "src/assets",
              "my-module/images"
            ],

并且在img中尝试一下

img src="images/my-image.png"

希望有用

Answer 2

您必须将images文件夹添加到angular.json中的资源中：

"assets": [
              "src/assets",
              "src/favicon.ico",
              {
                "glob": "*.{png,jpg,gif,svg}",
                "input": "src/app/path-to-your-module/images",
                "output": "your-module/images"
              }

            ],

这将匹配图像目录中的所有png，jpg，gif和svg文件。并将它们输出到your-module/images/。要在模块内部使用图像，请使用：

<img src="your-module/images/your-image.png">

通过使用对象而不是字符串，您可以指定输出目录。否则，您将必须使用img标签中模块的完整路径。