qiankun框架子应用静态文件地址问题

Question

我是使用antd-pro框架做的项目，主应用和子应用都是。

子应用（:8888）写法 <img src="/images/001.jpg" alt="" />
因为图片是放到public目录下的，localhost:8888/images/001.jpg 是可以访问到图片的。

但是主应用（:5555）访问的时候，解析出来的html代码依然是 <img src="/images/001.jpg" alt="" />，对于页面来说这里的地址就是localhost:5555/images/001.jpg了，访问失败。

当然，less里引入是ok的 background: url(/images/001.jpg);，虽然是相对路径，但是访问的时候，主应用和子应用访问的图片地址都是 localhost:8888/images/001.jpg。

我目前的解决方案是，在public下加一层目录/app1file/，子项目所有涉及静态文件引入的都加上这个前缀，这样在主应用里做代理，重新指向:8888。这样是可以的，但是感觉不优雅，老项目嵌入改动太大。

我了解到webpack publicPath这个属性，可以在打包的时候把http://xxx加在引入的路径上，做成绝对路径。
我期待的<img src="/images/001.jpg" alt="" />会变成<img src="localhost:8888/images/001.jpg" alt="" />；但是找了不少写法都不生效，可能和umi的config写法不同有关。

不知道有没有朋友对这块了解比较深入，帮忙解答下。或是推荐其他的解决方案。谢谢了。

---更新-----------------------------
publicPath加上后打包，似乎对直接引入的不生效，是有什么忽略的地方吗？

---贴下源码-----------------------------
主框架就不用了，子应用页面代码：

        <div>
            <img src="/images/001.jpg" alt="" />
        </div>

config配置

export default defineConfig({
  ...
  publicPath: "http://localhost:8881/",
  ...
});

其实我看到qiankun有说到

借助 webpack 的 file-loader ，在打包时给其注入完整路径（适用于字体文件和图片体积比较大的项目）

可能是我想要的效果，但是配置不生效，不知道是不是配置的问题

export default defineConfig({
  ...
  publicPath: "http://localhost:8881/",
  ...

  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        name:'[name].[ext]',
        publicPath: "http://localhost:8881/",
      });
  },
});

Answer 1

你的思路是对的。就一点是变成 src="//localhost:8888" 不是 src="localhost:8888"，前面那俩斜杠很重要。

qiankun 自己的文档上就提到了这个问题：

v1：为什么子应用加载的资源会 404？
v2：为什么微应用加载的资源会 404？