自定义模块内资源的路径

Question

我有一个模块：

观察：这不是根模块

my-module
├── components
|   └── my-component
|        └── my-component.html
└── images
    └── 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 将我的路径解析为：


    localhost:4200/./images/my-image.png
    localhost:4200/../images/my-image.png
    localhost: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

您必须将图像文件夹添加到 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 标签中使用您的模块的完整路径。

自定义模块内资源的路径

Path to resources inside custom module

html

angular

image

assets