乾坤微服务子项目图片资源加载失败
子项目单独运行时正常；放在乾坤上，加载图片时失败。
·
一、背景
子项目单独运行时正常；放在乾坤上，<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. 使用代理转发
- webpack 中配置图片资源的 publicPath，使打包时给图片资源加统一前缀，如：/assets/xxx.png => /img-api/assets/xxx.png
- 配置乾坤项目的 nginx，根据 /img-api 前缀，将地址转发到子项目服务器
- 如果子项目仍需单独运行，那么也要配置子项目 nginx
- 优点：比较中肯的一种方式
- 缺点：需要运维配合
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)