react radio 切换图片 图片尺寸丢失

react项目中,用ant的radio控制切换图片时,图片尺寸丢失了

问题如下:

查看开发者工具:图片格式转成了background: url(/src/assets/images/QR1.png) 0% 0% / 266px 266px no-repeat;这种样式 , 所以需按照这种格式处理图片

解决后的代码:

javascript 复制代码
 // 这是手机区域的代码         
            <div
                className='QRcode'
                style={{
                  width: 266,
                  height: 266,
                  background:
                    value2 === 1
                     // ? `url(${QR1})`  // 这里是旧写法,下面是新写法
                      ? `url(${QR1})  0% 0% / 266px 266px`
                      : value2 === 2
                      ? `url(${QR2})  0% 0% / 266px 266px`
                      : value2 === 3
                      ? `url(${QR3})  0% 0% / 266px 266px`
                      : `url(${QR1})  0% 0% / 266px 266px`,
                  backgroundSize: '266px 266px',
                  backgroundRepeat: 'no-repeat'
                }}
              >
                <QRCode
                  value={qrCodeValue}
                  className='qrcode'
                  style={{
                    width: 200,
                    height: 200,
                    zIndex: 100,
                    position: 'relative'
                  }}
                  level={'L'} // 可选,可以接受7,15,25,30程度的容错级别,例如'L', 'M', 'Q', 'H'
                  bgColor='transparent' // 设置二维码背景为透明
                  fgColor='white' // 二维码的颜色为黑色或其他深色,确保对比度
                />
               </div>

解决后的图片:

相关推荐
clownAdam41 分钟前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~44 分钟前
phpstudy .htaccess 文件内容
java·开发语言·前端
@PHARAOH2 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了2 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER2 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star3 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端3 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏3 小时前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq3 小时前
前端box-shadow出现兼容性问题如何处理
前端
携欢3 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss