自定义模块内资源的路径答案

【问题标题】：Path to resources inside custom module自定义模块内资源的路径
【发布时间】：2020-06-02 15:16:48
【问题描述】：

我有一个模块：

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"

但是当我为我的应用程序提供服务时，角度将我的路径解析为：

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

我想要 Angular 来解析我的路径相对于我的 html 文件所在的模块。我该怎么做？

【问题讨论】：

标签： html angular image assets

【解决方案1】：

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

【讨论】：

为我工作！应用该更改后，我不得不再次运行“ng serve”。谢谢

【解决方案2】：

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

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

在 img 中试试这个

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

希望有用

【讨论】：