海南省建设工程质量监督网站,建站63年来第一次闭站 北京站辟谣,最新公司名字大全,我们做网站 出教材 办育心经[qiankun]-图片加载问题开发版本图片加载报错现象描述分析解决方案base64的展示格式静态资源的展示方式取消hash的取值方式#xff0c;并在主应用中添加图片设置图片的绝对路径根据环境动态设置图片的绝对路径nginx转发方式开发版本
vue: ^3.2.45,
并在主应用中添加图片设置图片的绝对路径根据环境动态设置图片的绝对路径nginx转发方式开发版本
vue: ^3.2.45,
qiankun: ^2.8.4图片加载报错
现象描述
主服务加载子服务的时候子服务的图片有些可以正常展示有些无法正常展示
分析
使用浏览器的开发者工具发现可以展示的图片是打包后使用base64的格式展示的不能展示的图片是因为打包后使用的相对路径去展示图片
在微服务中不能展示的图片相对路径是…/…/assets/img/empty.2bf9e4f5.png
如果该微服务单独打开子服务页面则获取图片路径是子域名加载正确但是当主服务加载子服务的过程导致相对路径的域名变成了主服务主服务是不存在该hash图片了导致了图片的加载404问题
解决方案
根据分析可以发现解决方案很明显
使相对路径的图片变成base64的展示格式上传到CDN位置使用访问静态资源的方式也即http的方式访问图片取消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 domainDNS_MAP[env]
div :style{background-image:url(${domain}/img/empty.png)}/divnginx转发方式
nginx根据前缀设置转发其实该方式并不合适因为基本打包方式导致所有微服务可能都是/assets/img的前缀图片域名变成主服务域名主服务并不清楚当前图片是转发给那个子服务的
