react 动态设置 backgroundImage base64图片不显示bug记录

最新推荐文章于 2022-07-16 09:06:31 发布
最新推荐文章于 2022-07-16 09:06:31 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiren_get/article/details/101053929
版权

react 动态设置 backgroundImage base64图片不显示bug记录

问题：图片格式为base64 如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z

解决方案

  1. 先把base64里面的空格转义
    	img = img.replace(/\s/g, encodeURIComponent(' '))
  2. 使用模板字符串设置backgroundImage
    $0.style.backgroundImage =
最低0.47元/天 解锁文章
wangweiren_get
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React样式修改背景失效
from_the_star的博客
10-19 1402
背景介绍 点击后，将不透明的按钮修改为渐进透明的按钮。代码如下： 修改前： let style = this.props.style; style["background"] = "rgba(250,103,37,1)"; //... return ( <div style={this.style}>立即下载</div> ); 修改后： let style = this.props.style; let progStr= Math.floor(progress*100)+"%";
php将div转图片不显示,base64图片,在background-image中不显示问题解析 - 哦吆～Blog
weixin_36268722的博客
03-09 890
当我们使用PHP将线上图片资源转换为base64图片编码后，图片编码放在 img src中可以正常展示，但如果将其放入CSS样式background-image中时，会出现图片不能正常显示问题，此问题是因为网络上的生成代码往往都使用chunk_split对数据进行了处理，使数据中有了换行chunk_split： 将字符串按指定长度、使用指定字符分隔开来。当网页源代码为如下图所示时，图片不能正常显...
vue 动态绑定 backgroundimage问题，以及动态绑定img的src,图片无法显示问题
韦大人orz
07-27 3605
（以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题，.在外部css文件和style标签里面定义的样式不会出现以下问题） 我们可能会通过以下这种方式来设置元素的背景（注意元素需设置宽高，或者元素里有内容支撑） <div style="backgroundImage:url('../../xxx.jbg')"> 使用vue-cli创建项目后，使用以下三种方式设置背景样式时，第一种方式无法生效，后面两种方式OK， 使用第一种方式时，无论这里用@/asset.
react 中引入图片不显示问题
杜杜的博客
12-17 3485
通常我们引入图片 <img src='图片路径' alt=''/> 在React 中我们使用上面的写法引入会图片加载不出来，不显示。 所以我们在react中使用以下两种方式去引入图片： 组件方式引入： import ImageOne from '图片路径'; //直接当成组件去使用 <img src={ImageOne } alt='' /> reauire 直接引入图片地址： 　<img s rc={ require('图片路径')} alt='' />
Css中路径data用法
weixin_30535913的博客
08-13 417
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码 data:text/html;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;ba...
react quill中图片上传由默认转成base64改成上传到服务器的方法
12-13
使用react-quill富文本编辑器，里面处理图片是默认转成base64，提交到后台的时候文件太大，因此这里改写处理image的逻辑，改成上传到服务器。 具体代码如下： 配置1 import Quill from 'quill' import ReactQuill...
React项目动态设置title标题的方法示例
10-17
主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native-quick-base64:一个用于React Native的快速base64模块
05-10
react-native-quick-base64 用于React Native的C ++中Base64的本地实现。 比iPhone 11 Pro上的快4倍。 尝试在下进行基准测试。 安装 npm install react-native-quick-base64 用法 import { btoa , atob } from '...
background url base64
weixin_33744141的博客
03-10 2606
各自含义：data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件，编码采用ASCII 字符，ASCII编码内容是‘AAAA’”。 b...
react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法
weixin_30825199的博客
09-29 1649
项目需求，需要根据当前的图片的路径值的来（加或者减）动态改变其值： state定义如下： this.state={ basket01:0+require("../../img/egg/egg1_00.png"), basket02:0+require('../../img/egg/egg2_00.png'), ...
css 设置背景图片 不显示的问题如何解决
qq_45769627的博客
03-29 5461
今天给css设置个背景图片，发现怎么弄都不显示，原来既要设置长和宽，也要注意路径中是’/’,而不是’' 图片路径: 错误做法，这样干什么也显示不了： background-image: url("D:\workspace\vscode\1.jpg"); 正确做法，长度宽度大家自己调整： background-image: url('/workspace/vscode/1.jpg'); height: 1000px; width: 1000px; 我太菜了！
【React】两种样式文件引用约定->解决样式不生效问题
the_fool_的博客
01-14 3408
文件目录结构图（不同的命名方式）： 两个scss的内容： .test { background-color: #5e83fb !important; } 引用文件的两种方式： 方式1：import styles from './index.module.scss'; 方式2：import './index.scss'; 方式1的使用方式(react编译器会将文件编译成作...
react动态添加背景图片/不同内容添加对应背景
前端小白的学习分享小世界
07-16 2540
根据内容动态添加相应背景图片
React项目本地环境正常显示，打包部署服务器图片不显示问题
objctly的博客
04-04 5732
React项目部署服务器，图片不显示
关于使用元素 background-image 时遇到图片显示无效的原因及解决办法
热门推荐
weixin_40518162的博客
10-08 3万+
今天写java时遇到一个问题，给网页body编写css样式时background-image显示无效。上网查了才知道是路径有问题。 开始搞不懂为什么img标签就可以。现在记录下来方法方便以后忘记后查阅。 1.ccs样式background-image url() 失效原因。 我想在index.jsp中用background-image 引入upload下的mapleL
CSS 使用 background-image url base64
LY_Dengle的专栏
10-08 3万+
各自含义： data: ----获取数据类型名称 image/gif; -----指数据类型名称 base64 -----指编码模式 AAAAA ------指编码以后的结果。 background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件，编码采用ASCII 字符，ASCII编
IE下background背景图片无法显示问题解决方法
WhoWrongsWhere的专栏
04-28 1万+
原代码如下：   原来的"label_input_checkbox_1_span的css设置如下： background: url("../images/news/201504280800.png")no-repeat 0% 0% transparent; background-repeat: no-repeat; cursor: pointer; vertical-
react组件background设置
想飞上天和太阳肩并肩
01-23 5921
&amp;lt;div style={{ background: &quot;url(&quot;+require(&quot;../../assets/selected_home.png&quot;)+&quot;) 0 0 / 16px 16px&quot; }} &amp;gt;888&amp;lt;/div&amp;gt;
react图片转base64
最新发布
12-22
在React中将图片转换为Base64格式有多种方法，以下是其中两种常用的方法： 方法一：使用FileReader对象 ```javascript // 创建一个input[file]元素 const inputElement = document.createElement("input"); inputElement.type = "file"; // 监听文件选择事件 inputElement.addEventListener("change", (event) => { const file = event.target.files[0]; const reader = new FileReader(); // 读取文件内容并转换为Base64格式 reader.onloadend = () => { const base64String = reader.result; console.log(base64String); }; reader.readAsDataURL(file); }); // 触发文件选择事件 inputElement.click(); ``` 方法二：使用canvas元素 ```javascript // 创建一个input[file]元素 const inputElement = document.createElement("input"); inputElement.type = "file"; // 监听文件选择事件 inputElement.addEventListener("change", (event) => { const file = event.target.files[0]; const image = new Image(); // 读取文件内容并绘制到canvas上 const reader = new FileReader(); reader.onloadend = () => { image.src = reader.result; }; reader.readAsDataURL(file); // 等待图片加载完成后获取Base64格式的图片数据 image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext("2d"); context.drawImage(image, 0, 0); const base64String = canvas.toDataURL("image/png"); console.log(base64String); }; }); // 触发文件选择事件 inputElement.click(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值