当前位置: 首页 > news >正文

[qiankun]-图片加载问题

[qiankun]-图片加载问题

  • 开发版本
  • 图片加载报错
    • 现象描述
    • 分析
    • 解决方案
      • base64的展示格式
      • 静态资源的展示方式
      • 取消hash的取值方式,并在主应用中添加图片
      • 设置图片的绝对路径
      • 根据环境动态设置图片的绝对路径
      • nginx转发方式

开发版本

"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的前缀,图片域名变成主服务域名,主服务并不清楚当前图片是转发给那个子服务的

相关文章:

[qiankun]-图片加载问题

[qiankun]-图片加载问题开发版本图片加载报错现象描述分析解决方案base64的展示格式静态资源的展示方式取消hash的取值方式&#xff0c;并在主应用中添加图片设置图片的绝对路径根据环境动态设置图片的绝对路径nginx转发方式开发版本 "vue": "^3.2.45", &…...

关于upstream的八种回调方法

1 creat_request调用背景&#xff1a;用于创建自己模板与第三方服务器的第一次连接步骤1&#xff09; 在Nginx主循环&#xff08;ngx_worker_process_cycle方法&#xff09; 中&#xff0c;会定期地调用事件模块&#xff0c; 以检查是否有网络事件发生。2&#xff09; 事件模块…...

0303泰勒公式-微分中值定理与导数的应用

文章目录1 引入2 泰勒中值定理2.1 泰勒多项式3.2 泰勒中值定理13.3 泰勒中值定理22.4 误差估计4 麦克劳林公式5 常见麦克劳林公式6 泰勒公式相关例题6.1 将函数展成指定的泰勒公式6.1.1 公式法6.1.2 间接展法&#xff08;变量替换&#xff09;6.2 利用泰勒公式求极限6.3 确定无…...

日常运维基础命令

commandexplainps -f -u user_name显示指定用户的进程ps aux --sort-pcpu,pmem先以cpu使用量进行排序&#xff0c;cpu使 用一样&#xff0c;以内存使用率排序ps -ef --forest显示ACLII进程数ps --ppid 28208显示父进程的子进程ps -p 14447 -L显示进程的线程ps -e -o pid&#x…...

人员行为识别系统 TensorFlow

人员行为识别系统人员行为识别系统通过TensorFlow深度学习技术&#xff0c;人员行为识别算法对画面中区域人员不按要求穿戴、违规抽烟打电话、睡岗离岗以及作业流程不规范实时分析预警&#xff0c;发现违规行为立即抓拍告警。深度学习应用到实际问题中&#xff0c;一个非常棘手…...

ES-倒排索引BKD原理skiplist

1.Elasticsearch数据存储结构FST、skiplist、BKD-tree、LSM-tree Elasticsearch数据结构存储流程_善思的博客-CSDN博客_elasticsearch 数据结构 number?keyword?傻傻分不清楚 - Elastic 中文社区 ElasticSearch实战&#xff08;六&#xff09;-Skip List 跳表算法&#xf…...

每天一道大厂SQL题【Day12】微众银行真题实战(二)

每天一道大厂SQL题【Day12】微众银行真题实战(二) 大家好&#xff0c;我是Maynor。相信大家和我一样&#xff0c;都有一个大厂梦&#xff0c;作为一名资深大数据选手&#xff0c;深知SQL重要性&#xff0c;接下来我准备用100天时间&#xff0c;基于大数据岗面试中的经典SQL题&…...

带您了解TiDB MySQL数据库中关于日期、时间的坑

带您了解TiDB & MySQL数据库中关于日期、时间的坑时间的基础知识什么是时间计算时间的几种方法世界时&#xff08;UT&#xff09;协调世界时&#xff08;UTC&#xff09;国际原子时&#xff08;TAI&#xff09;时区的概念中国所在的时区操作系统的时区datetimedatectl数据库…...

【华为OD机试模拟题】用 C++ 实现 - 求字符串中所有整数的最小和

最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…...

harbor 仓库迁移升级

harbor 仓库迁移升级 harbor仓库安装数据传输仓库切换版本 v1.8.0 v2.3.5 harbor仓库安装 环境准备&#xff1a;安装docker详见&#xff1a;docker 的介绍和部署&#xff0c;并下载docker-compose详见&#xff1a;docker 三剑客compose。 现有支持的安装harbor仓库的方式有两…...

评论功能设计思路~

文章目录 评论功能设计框架1、定义2、目标3、动机4、评论类别**5、评论互动****6、评论区展示结构****6.1 主题式****6.2 平铺式****6.3 盖楼式****7、评论排序机制****8、评论加载形式****9、其他**结语评论功能设计框架 1、定义 评论是指针对于事物进行主观或客观的自我印象…...

算法训练营 day52 动态规划 买卖股票的最佳时机系列1

算法训练营 day52 动态规划 买卖股票的最佳时机系列1 买卖股票的最佳时机 121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票…...

3.基于分割的文本检测算法--DBNet++

文章目录1.概况2.DBNet中的主要方法2.1 网络结构2.2 适应特征图融合模块(Adaptive Scale Fusion Module, ASF)3.ASF模块的源码实现参考资料欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 1.概况 2022年02月份论文&#xff1a;Real-Time S…...

IOS打包、SDK接入记录等

IOS打包、SDK接入记录等 Mac上安装HCLR路径 /Applications/Unity/Hub/Editor/2019.4.40f1c1/Unity.app/Contents/il2cpp HCLR 指定4.40是要Unity启动打开的il2cpp&#xff0c;否则HCLR Installer他会报找不到MonoBleedingEdge Mac删除证书 只能点击钥匙串做上角的登录后&…...

【C++】类与对象(引入)

目录 前言 类的引入 类的定义 封装与访问限定符 封装 访问限定符 类的实例化 类的大小 this指针 特性 前言 &#x1f3b6;我们都知道&#xff0c;C语言是面向过程的编程&#xff0c;而C是面向对象的编程&#xff0c;更多体现在编程的关注点上。 &#x1f3b6;就拿洗…...

Redis 高级数据类型

文章目录一、Bitmaps&#xff1a;属性状态统计二、HyperLogLog&#xff1a;基数统计三、GEO&#xff1a;地理位置信息计算提示&#xff1a;以下是本篇文章正文内容&#xff0c;Redis系列学习将会持续更新 一、Bitmaps&#xff1a;属性状态统计 Bitmaps类型&#xff1a; 统计一…...

Java8 新特性-函数式接口

什么是函数式接口 先来看看传统的创建线程是怎么写的 Thread t1 new Thread(new Runnable() {Overridepublic void run() {System.out.println("t1");} }); t1.start();再来看看使用了函数式接口是怎么写的 Thread t2 new Thread(() -> System.out.println(&…...

这套软件测试试卷能打90分,直接入职字节吧

目录 一&#xff0e;填空 二、 判断题&#xff08;正确的√&#xff0c;错误的╳&#xff09;共10分&#xff0c;每小题1分 三、数据库部分&#xff1a;&#xff08;共15分&#xff09; 四、设计题。本题共 1 小题&#xff0c;满分 20分 一&#xff0e;填空 1、 系…...

GUI可视化应用开发及Python实现

0 建议学时 4学时&#xff0c;在机房进行 1 开发环境安装及配置 1.1 编程环境 安装PyCharm-community-2019.3.3 安装PyQt5 pip install PyQt5-tools -i https://pypi.douban.com/simple pip3 install PyQt5designer -i https://pypi.douban.com/simple1.2 环境配置 选择“…...

【论文简述】GMFlow: Learning Optical Flow via Global Matching(CVPR 2022)

一、论文简述 1. 第一作者&#xff1a;Haofei Xu 2. 发表年份&#xff1a;2022 3. 发表期刊&#xff1a;CVPR oral 4. 关键词&#xff1a;光流、代价体、Transformers、全局匹配、注意力机制 5. 探索动机&#xff1a;过去几年中具有代表性的光流学习框架的核心估计方式没有…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...