百度富文本上传图片后样式崩塌

news2024/9/23 17:20:18

 🔥博客主页: 破浪前进
🔖系列专栏: Vue、React、PHP
❤️感谢大家点赞👍收藏⭐评论✍️


在这里插入图片描述

问题描述:上传图片后,图片会变得很大,当点击的时候更是会顶开整个的容器的高跟宽

原因:百度富文本为了呈现给用户良好的使用导致没有写死宽高,本地多大上传后就是多大

解决方法:在同时修改两个文件分别在

loader.setAttribute('width','100%');//图片宽度100%
loader.setAttribute('height','auto');//图片高度auto

23774行(不一定)和24533(不一定),不行就搜索

		loadingHtml = '<img class="loadingclass" id="' + loadingId + '" src="' +
                me.options.themePath + me.options.theme +
                '/images/spacer.gif" title="' + (me.getLang('autoupload.loading') || '') + '" >';
            successHandler = function(data) {
                var link = urlPrefix + data.url,
                    loader = me.document.getElementById(loadingId);
                if (loader) {
                    loader.setAttribute('src', link);
                    loader.setAttribute('_src', link);
                    loader.setAttribute('title', data.title || '');
                    loader.setAttribute('alt', data.original || '');
                    loader.setAttribute('width','100%');//图片宽度100%
  				loader.setAttribute('height','auto');//图片高度auto
                    loader.removeAttribute('id');
                    domUtils.removeClasses(loader, 'loadingclass');
                }
            };
					if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.setAttribute('width','100%');//图片宽度100%
  						loader.setAttribute('height','auto');//图片高度auto
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                            showErrorLoader && showErrorLoader(json.state);
                        }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1152552.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割7(数据预处理)

在上一节&#xff1a;【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割6&#xff08;数据预处理&#xff09; 中&#xff0c;我们已经得到了与mhd图像同seriesUID名称的mask nrrd数据文件了&#xff0c;可以说是一一对应了。 并且&#xff0c;mask的文件&#xff0c;还根据结…

【错误解决方案】ModuleNotFoundError: No module named ‘ngboost‘

1. 错误提示 在python程序&#xff0c;尝试导入一个名为ngboost的模块&#xff0c;但Python提示找不到这个模块。 错误提示&#xff1a;ModuleNotFoundError: No module named ‘ngboost‘ 2. 解决方案 出现上述问题&#xff0c;可能是因为你还没有安装这个模块&#xff0c;…

CXL技术交流群问题讨论记录(1)

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c;转载或引用请注明出处【https://mangopapa.blog.csdn.net/article/details/134131924】。…

Python 学习1 基础

文章目录 基础字符串字面量常用的值类型注释变量print语句数据类型数据类型转换标识符运算符 字符串拓展小结 2023.10.28 周六 最近打算学一下Python&#xff0c;毕竟确实简单方便&#xff0c;而且那个编程语言排名还是在第一。不过不打算靠它吃饭&#xff0c;深不深入暂且不说…

防数据泄密的解决方案

防数据泄密的解决方案 安企神数据防泄密系统下载使用 现代化企业离不开信息数据&#xff0c;数据对企业的经营至关重要&#xff0c;也是企业发展的命脉。为了保护公司数据不被泄露&#xff0c;尤其是在防止数据泄密方面&#xff0c;公司面临着巨大的挑战&#xff0c;需要采取…

Python爬虫实战(六)——使用代理IP批量下载高清小姐姐图片(附上完整源码)

文章目录 一、爬取目标二、实现效果三、准备工作四、代理IP4.1 代理IP是什么&#xff1f;4.2 代理IP的好处&#xff1f;4.3 获取代理IP4.4 Python获取代理IP 五、代理实战5.1 导入模块5.2 设置翻页5.3 获取图片链接5.4 下载图片5.5 调用主函数5.6 完整源码5.7 免费代理不够用怎…

EasyFlash移植使用- 关于单片机 BootLoader和APP均使用的情况

目前&#xff0c;我的STM32单片机&#xff0c;需要在BootLoader和APP均移植使用EasyFlash&#xff0c;用于参数管理和IAP升级使用。 但是由于Flash和RAM限制&#xff0c;减少Flash占用&#xff0c;我规划如下&#xff1a; BootLoader中移植EasyFlash使用旧版本&#xff0c;因为…

机器学习-基本知识

 任务类型 ◼ 有监督学习(Supervised Learning) 每个训练样本x有人为标注的目标t&#xff0c;学习的目标是发现x到t的映射&#xff0c;如分类、回归。 ◼ 无监督学习(Unsupervised Learning) 学习样本没有人为标注&#xff0c;学习的目的是发现数据x本身的分布规律&#xf…

ROS自学笔记二十: Gazebo里面仿真环境搭建

Gazebo 中创建仿真实现方式有两种:1直接添加内置组件创建仿真环境2: 手动绘制仿真环境 1.添加内置组件创建仿真环境 1.1启动 Gazebo 并添加组件 1.2保存仿真环境 添加完毕后&#xff0c;选择 file ---> Save World as 选择保存路径(功能包下: worlds 目录)&#xff0c;文…

二维数组如何更快地遍历

二维数组如何更快地遍历 有时候&#xff0c;我们会发现&#xff0c;自己的代码和别人的代码几乎一模一样&#xff0c;但运行时间差了很多&#xff0c;别人是 AC \text{AC} AC&#xff0c;你是 TLE \text{TLE} TLE&#xff0c;这是为什么呢&#xff1f; 一个可能的原因是数组的…

延迟队列实现方案总结

日常开发中&#xff0c;可能会遇到一些延迟处理的消息任务&#xff0c;例如以下场景 ①订单支付超时未支付 ②考试时间结束试卷自动提交 ③身份证或其他验证信息超时未提交等场景。 ④用户申请退款&#xff0c;一天内没有响应默认自动退款等等。 如何处理这类任务&#xff0c;最…

http1,https,http2,http3总结

1.HTTP 当我们浏览网页时&#xff0c;地址栏中使用最多的多是https://开头的url&#xff0c;它与我们所学的http协议有什么区别&#xff1f; http协议又叫超文本传输协议&#xff0c;它是应用层中使用最多的协议&#xff0c; http与我们常说的socket有什么区别吗&#xff1f; …

2000-2021年上市公司产融结合度量数据

2000-2021年上市公司产融结合度量数据 1、时间&#xff1a;2000-2021年 2、指标&#xff1a;股票代码、年份、是否持有银行股份、持有银行股份比例、是否持有其他金融机构股份、产融结合 3、来源&#xff1a;上市公司年报 4、范围&#xff1a;上市公司 5、样本量&#xff…

4种类型WMS的简要说明

仓库管理系统&#xff08;WMS&#xff09;主要有四种类型&#xff1a;独立仓库管理系统、供应链管理系统中的仓库管理模块、ERP 系统中的仓库管理模块和基于云的仓库管理系统。 独立仓库管理系统 独立仓库管理系统提供的功能可实现日常仓库运营。公司可以使用WMS系统来监管和…

【MATLAB源码-第62期】基于matlab的DCSK(差分混沌移位键控调制)系统误码率仿真。

MATLAB 2022a 1、算法描述 DCSK&#xff08;Differential Chaos Shift Keying&#xff09;是一种差分混沌移位键控调制方式&#xff0c;常用于无线通信系统。其调制和解调的基本流程如下&#xff1a; 1. DCSK调制 1.1 生成混沌序列 - 初始条件&#xff1a;选择一个混沌映射&a…

『K8S 入门』一:基础概念与初步搭建

『K8S 入门』一&#xff1a;基础概念与初步搭建 一、kubernetes 组件 官方示图 抽象示图 Master 控制面板 Api-Server&#xff1a;接口服务&#xff0c;基于 REST 风格开放 k8s 接口的服务ControllerManager cloud-controller-manager&#xff1a;云控制管理器。第三方平…

Android图片加载框架库源码解析 - Coil

文章目录 一、什么是Coil二、引入Coil1、ImageView加载图片1.1、普通加载1.2、crossfade(淡入淡出)加载1.3、crossfade的动画时间1.4、placeholder1.5、error1.6、高斯模糊1.7、灰度变换1.8、圆形1.9、圆角 2、Gif加载3、SVG加载(不存在)4、视频帧加载5、监听下载过程6、取消下…

想翻译pdf文档,试了几个工具对比:有阿里(完全免费,快,好用,质量高,不用注册登录)道最好(有限免费) 百度(有限免费)和谷歌完全免费(网不好)

文档翻释作为基础设施&#xff0c;工作必备。 阿里 &#xff08;完全免费&#xff0c;快&#xff0c;好用&#xff0c;质量高&#xff0c;不用注册登录&#xff0c;无广告&#xff09;我给满分 https://translate.alibaba.com/#core-translation 先选好语言。 Google(完全免…

PDManer生成Postgis对应Schema数据库设计文档

项目开发数据库选择postGis&#xff0c;由于需要编写数据库设计说明书&#xff0c;因此选择工具PDManer生成数据库设计文档&#xff0c;但是postGis一个数据库&#xff0c;可能对应多个Schema。如下图所示&#xff1a; 1.编写数据库设计文档时&#xff0c;仅需编写hly这个Sche…

美妆造型教培服务预约小程序的作用是什么

美业市场规模很高&#xff0c;细分类目更是比较广&#xff0c;而美妆造型就是其中的一类&#xff0c;从业者也比较多&#xff0c;除了学校科目外&#xff0c;美妆造型教培机构也有生意。 对机构来说主要目的是拓客引流-转化及赋能&#xff0c;而想要完善路径却是不太容易&…