byte二维码在img中展示

发表于2022-01-07|更新于2026-02-24

|浏览量:

睡在哪里都是睡在黑夜里。——贾平凹《废都》

我们使用hutool的工具类生成二维码图片后，如果转为byte数组，返还给前端，我们要放入img中显示

@GetMapping("generateCode")
@ResponseBody
public byte[] generateCode() {
    return QrCodeUtil.generatePng("https://VampireAchao.github.io/", QrConfig.create().setImg(ImgUtil.getImage(URLUtil.url("/img/oss/2020-06-01/head.jpg"))));
}

直接放到src是不行的，需要在前面加一个data:image/jpeg;base64,

最终变成这样

效果图：

前端

相关推荐

2022-09-15

react中配置图片容错

爱情是友谊的精华，书信是爱情的妙药——豪厄尔之前写了:vue中img错误默认图片以及img图片丢失后默认图今天写个react版本的： 1<img src={xxxx} onError={(e) => e.target.src = '/img/oss/2020-06-01/head.jpg'} alt={value.alt} /> 代码很简单，也很管用

2021-09-27

vue中属性简写

任何职业都不简单，如果只是一般地完成任务当然不太困难，但要真正事业有所成就，给社会做出贡献，就不是那么容易的，所以，搞各行各业都需要树雄心大志，有了志气，才会随时提高标准来要求自己。 —— 谢觉哉我们可以在包含vue-loader的vue项目中如下写法 123<div :class="[{ active: active }, isButton ? prefix + '-button' : null]"></div><div :class="{ active, [`${prefix}-button`]: isButton }"></div> 这里三个值： 12345678910export default { data() { return { active: true, isButton: true, prefix: '...

2022-09-09

metainfo.js

谁若想在困厄时得到援助，就应在平日待人以宽——萨迪分享一个获取文件信息的js库MediaInfo.js 代码仓库： https://github.com/buzz/mediainfo.js 代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2022-07-30

ant motion

一个人的行动，比他所说的话，更有详细的表现。——卡耐基分享一个动画库ant-motion 官方文档：https://motion.ant.design/index-cn 提供的效果也是非常好看是一个值得一试的动画库

2020-09-02

js获取url上的参数

获取url上的参数 123456789101112function getUrlParam(name) { if (name == null) { return name; } var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { //return unescape(r[2]); return r[2]; } return null; } 1console.log(getUrlParam("id"));

2025-04-08

react-explorer

原谅是容易的，忘却则是困难的。——普拉顿 React Explorer: 一个使用 React 和 Electron 的文件管理器项目简介React Explorer 是一个开源的文件管理器项目，使用 TypeScript、React 和 Blueprint 编写，并使用 Electron 打包。它提供了一个跨平台的文件管理解决方案，支持 Linux、macOS 和 Windows 系统。项目特点跨平台支持：React Explorer 可以在 Linux、macOS 和 Windows 系统上运行，为用户提供一致的文件管理体验。现代前端技术：项目使用 TypeScript 和 React 进行开发，确保代码的健壮性和可维护性。 Blueprint 组件库：使用 Blueprint 组件库构建用户界面，提供现代化的 UI 体验。 Electron 打包：通过 Electron 将应用打包成桌面应用，方便用户安装和使用。状态管理：使用 MobX 进行状态管理，确保应用状态的一致性和响应性。开源许可：项目采用 MIT 许可，允许用户自由使用和修改代码。项目主页项目主...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中