一、背景
子项目单独运行时正常;放在乾坤上,<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
- 优点:比较中肯的一种方式
- 缺点:需要运维配合