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操作进行了解码。

相关推荐
今天和Aboo结婚了吗1 小时前
【Broker一重启消息没了:一次RabbitMQ非持久化+没开Confirm的血亏事故】
java·rabbitmq·messagequeue·bug排查
无巧不成书02181 小时前
Windows PowerShell执行策略详解:从npm报错到完美解决
前端·windows·npm·powershell执行策略·执行策略·npm.ps1·脚本报错
daidaidaiyu7 小时前
一文学习 工作流开发 BPMN、 Flowable
java
Z兽兽8 小时前
React@18+Vite项目配置env文件
前端·react.js·前端框架
SuniaWang8 小时前
《Spring AI + 大模型全栈实战》学习手册系列 · 专题六:《Vue3 前端开发实战:打造企业级 RAG 问答界面》
java·前端·人工智能·spring boot·后端·spring·架构
sheji34168 小时前
【开题答辩全过程】以 基于springboot的扶贫系统为例,包含答辩的问题和答案
java·spring boot·后端
A_nanda9 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
m0_726965989 小时前
面面面,面面(1)
java·开发语言
xdscode9 小时前
Linux云服务器安装openclaw,并对接飞书通道
linux·服务器·飞书·openclaw
lswzw9 小时前
win11家庭版 安装 openclaw
服务器