角MFE - WebPack5 -模块联合-图像路径问题

Question

我们正在创建一个MFE角应用程序使用模块联邦WebPack 5，并在一个问题的图像源路径。当我们单独运行MFE时，映像正在加载(localhost:5000/assets/../angular.png)，但是当我们运行主机/ Shell应用程序时，由于MFE运行在不同的端口(5000)，而shell运行在不同的端口(4200)，并且当我们运行shell应用程序时，应用程序试图从shell的资产文件夹(localhost:4200/assets/../angular.png)访问映像，所以MFE没有加载MFE。

我们有两种选择：

1. 将这些图像移动到MFE之外的公用文件夹中，并参考
2. 使用配置文件中的basepath动态设置图像路径

我们在测试中使用了下面的示例，但在下面的示例中，angular.png文件在MFE1和Shell中都可用，但是如果从Shell中删除它，则加载shell应用程序时它将无法工作。

源参考代码示例 (感谢@manfredsteyer)

在MFE中还有其他解决方案来解决这个问题吗？

Answer 1

问题是图像是使用相对路径导入的。因为微前端总是加载在shell中，这些路径将引用shell的资产。要解决这个问题，您需要将完整的URL添加到图像中，以便从正确的微前端加载它。

如果要在微前端加载图像，应该如下所示：

<img src="http://localhost:5000/assets/image.png" />

要调整用于生产或开发的基url，可以在服务中编写一个方法，可以将该方法注入到componentes中。它可能看起来像这样：

public getImageBaseUrl(): string {
  if (environment.production) {
    return "http://someurl.com/assets/";
  } else {
    return "http://localhost:5000/assets/";
  }
}

然后，可以在HTML-模板中调用该方法：

<img [src]="getImageBaseUrl() + 'image.png'" />