乾坤微服务子项目图片资源加载失败

一、背景

子项目单独运行时正常；放在乾坤上，<img />加载图片时失败

二、分析原因

假设乾坤项目域名为 http://www.aaa.com，子项目域名为 http://www.bbb.com
项目实际运行时，图片的 html 写法为<img src="/assets/xxx.png" />
单独运行时，src 映射为 http://www.bbb.com/assets/xxx.png，这样没问题；
在乾坤中运行时，src 映射为 http://www.aaa.com/assets/xxx.png，就会找不到资源。

三、疑问

js 和 css 同样作为静态资源，为什么没有此类问题。
答：乾坤对此类资源做了解析处理，因此可以正常访问到。

四、解决

目前有三种解决方案，供参考

1. 使用cdn

将图片资源放到第三方服务器上，代码内直接对其引入

• 优点：简单省事
• 缺点：需要有相应条件支持

2. 图片以base64打包

把webpack中打包阈值调得非常大，使任何资源都打包为base64

• 优点：基本可以一劳永逸解决此类问题
• 缺点：会使代码体积增大，如果大图较多，会影响加载速度

3. 使用代理转发

1. webpack 中配置图片资源的 publicPath，使打包时给图片资源加统一前缀，如：/assets/xxx.png => /img-api/assets/xxx.png
2. 配置乾坤项目的 nginx，根据 /img-api 前缀，将地址转发到子项目服务器
3. 如果子项目仍需单独运行，那么也要配置子项目 nginx

• 优点：比较中肯的一种方式
• 缺点：需要运维配合