当前位置: 首页 > 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;过去几年中具有代表性的光流学习框架的核心估计方式没有…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...