[qiankun]-图片加载问题

开发版本

"vue": "^3.2.45",
"qiankun": "^2.8.4"

图片加载报错

现象描述

主服务加载子服务的时候，子服务的图片有些可以正常展示，有些无法正常展示

分析

使用浏览器的开发者工具，发现可以展示的图片是打包后使用base64的格式展示的，不能展示的图片是因为打包后使用的相对路径去展示图片

在微服务中，不能展示的图片相对路径是：…/…/assets/img/empty.2bf9e4f5.png

如果该微服务单独打开子服务页面，则获取图片路径是子域名，加载正确，但是当主服务加载子服务的过程，导致相对路径的域名变成了主服务，主服务是不存在该hash图片了，导致了图片的加载404问题

解决方案

根据分析可以发现解决方案很明显：

1. 使相对路径的图片变成base64的展示格式
2. 上传到CDN位置，使用访问静态资源的方式，也即http的方式访问图片
3. 取消Hash的命名方式，并使得主应用中也包含该图片，例如…/…/assets/img/empty.png

base64的展示格式

为什么有些是base64的格式,有些不是，经过查询之后发现10kb以下的图片会自动转化为base64的格式，但是以上的不会

在实践过程中发现并不是10kb以下的都会变成base64的格式，实测中4.96k的png格式图片转化失败，3.37kb的成功了

所以最简单的方式是对图片进行压缩，但是压缩图片这种方式非常有限制性，因为如果图片非常大，压缩到10kb以下可能很不现实，并且可能导致的图片的失帧

静态资源的展示方式

将所有的图片都上传至静态资源管理服务器，通过访问该服务器，访问静态资源，目前没有专门存放静态资源的服务器，所以该方式可以之后尝试

并且如果静态资源服务器关闭或撤销，可能导致图片的丢失，该方式也不太推荐，因为该方式导致了资源的分离

取消hash的取值方式，并在主应用中添加图片

该方式的优点是不用对自服务做更多处理，但是缺点也很明显，每次自服务中存在大于10kb的图片，也需要添加到主服务中，并且要非常注意不能有同名的图片之类的，总之该方式简单粗暴，不推荐,取消hash的方式请看images配置部分

设置图片的绝对路径

以下是对打包后图片的配置说明

const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;module.exports = {chainWebpack: (config) => {config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('url-loader').loader('url-loader').options({limit: 4096, // 小于4kb将会被打包成 base64fallback: {loader: 'file-loader',options: {name: 'img/[name].[hash:8].[ext]',//图片命名包含hash// name: 'img/[name].[ext]',//图片命名包去掉hashpublicPath,},},});},
};

设置publicPath为上线环境的值，所以缺点也是打包build的时候需要确定微服务的域名，该方式并不能根据环境动态设置该值，该方式也算是方式2的一个具体实现，如果线上环境比较单一可以使用该方式，但是如果打包后有多个环境与域名，例如sit/uat/prod，则该方式不合适

根据环境动态设置图片的绝对路径

publicPath的值只能简单的区分是开发环境还是线上环境，而无法对线上的环境进行区分

const DNS_MAP={sit:"xxx.xx.sit",uat:"xxx.xx.uat",prod:"xxx.xx.prod"
}
const env = window["env"];//系统配置，该值是你可以获取到的环境值
const domain=DNS_MAP[env]

<div :style="{background-image:`url(${domain}/img/empty.png)`}"></div>

nginx转发方式

nginx根据前缀设置转发，其实该方式并不合适，因为基本打包方式导致所有微服务可能都是/assets/img的前缀，图片域名变成主服务域名，主服务并不清楚当前图片是转发给那个子服务的