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

您必须将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标签中模块的完整路径。

自定义模块中资源的路径

2 个答案: