base64文本div中增加一个img标签,img标签实时渲染后端返回的base64数据成对应图片

问:

base64文本div中增加一个img标签,img标签实时渲染后端返回的base64数据成对应图片?

回答:

使用原生js实现:

假设现在我们获取到了侯丹返回的base64数据存储在字段content中,

现在,

const base64Data = content.replace(/ /g,"&nbsp;").replace(/\n/g,"<br>");

document.getElementById("notificationMessageContent").innerHTML = `<img src="${base64Data}" alt="" id="imageBase64">`

通过这段代码啊就可以实现原生js添加img标签到原来的渲染字符串base64的div(notificationMessageContent)中增加一个img标签了,这个img标签的src对应后端此时传回来的base64字段,且通过replace操作进行了解码。

相关推荐
懂懂tty6 分钟前
React Hooks原理
前端·react.js
00后程序员张7 分钟前
前端可视化大屏制作全指南:需求分析、技术选型与性能优化
前端·ios·性能优化·小程序·uni-app·iphone·需求分析
Tingjct8 分钟前
C++ 多态
java·开发语言·c++
线束线缆组件品替网10 分钟前
Amphenol网线组件RJE1Y12305152401线束选型指南替代方案解析
服务器·数码相机·电脑·音视频·电视盒子·智能电视
kyriewen11 分钟前
屎山代码拆不动?微前端来救场:一个应用变“乐高城堡”
前端·javascript·前端框架
@大迁世界13 分钟前
3月 React 圈又变天了
前端·javascript·react.js·前端框架·ecmascript
Totoro-wen13 分钟前
H20*8卡服务器装机指南
运维·服务器
Devin~Y14 分钟前
大厂Java面试实战:Spring Boot/WebFlux、Redis+Kafka、K8s可观测性与Spring AI RAG/Agent三轮连环问
java·spring boot·redis·kafka·kubernetes·resilience4j·spring webflux
忆江南15 分钟前
# iOS 稳定性方向常见面试题与详解
前端
陆枫Larry17 分钟前
一次讲清楚 `Promise.finally()`:为什么“无论成功失败都要执行”该用它
前端