接口直接返回图片或者base64位数据,前端获取处理展示为图片!!
一、接口返回base64位数据,前端处理展示成图片。
<img src={`data:image/png;base64, ${base64数据}`} alt="" />
二、接口直接返回图片,前端处理成base64位数据,并进行数据展示
axios
import axios, { Method } from 'axios';
const instance = axios.create({});
new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
)}`
)
.then((response: any) => {
resolve(response);
})
.catch((err) => {
reject(err.response);
});
引用
import React, { useEffect, useState } from 'react';
import { post } from 'axios';
const [imgUrl, setImgUrl] = useState<string>();
const getImgUrl = async () => {
try {
const res = await post({xxx});
setImgUrl(res);
} catch(error) {
console.error(error);
}
}
useEffect(() => {
getImgUrl();
}, [])
<img src={imgUrl} alt="" />
ps: 此时imgUrl值为 data:image/png;base64,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
接口直接返回图片或者base64位数据,前端获取处理展示为图片!!的更多相关文章
- java将图片输出base64位码显示
注意需要过滤:\r \n数据 jkd1.7的 import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; /** * 网络图片转换Base ...
- 用101000张食物图片实现图像识别(数据的获取与处理)-python-tensorflow框架
前段时间,日剧<轮到你了>大火,作为程序员的我,看到了另外一个程序员—二阶堂,他的生活作息,以及饮食规律,让我感同身受,最让我感触的是他做的AI聊天机器人,AI菜品分析机器人,AI罪犯分析 ...
- 图片转base64的几种场景(网络图片,本地图片,用户上传图片)
转载于博客园 https://www.cnblogs.com/zhangdiIT/p/7895903.html 写的很棒 推荐给大家 场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时 ...
- 微信小程序开发——base64位图片显示问题
前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- java编写之jpg图片与base64编码之间的转换
/** * @author zyq * 将网络图片进行Base64位编码 * @param imgUrl * */ public static String encodeWebImageToBase6 ...
- vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决
vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor vue-quill ...
- @ResponseBody返回4种数据格式的数据
1.返回一个键值对或者集合 前端JS请求: //返回值为map的形式 $(".name").blur(function(){ $.ajax({ type:"Post&qu ...
- PHP远程下载图片,微信头像存到本地,本地图片转base64
方法一(推荐): function download_remote_pic($url){ $header = [ 'User-Agent: Mozilla/5.0 (Windows NT 6.1; W ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
随机推荐
- windows Qstring 格式化字符串
Windows c++格式化字符串是个不省事的活,还想保证和mac平台保存通用,跨平台特性也得支持,调研一番,貌似只有Qstring符合了,特此记录一下 arg函数只支持字符串 参数最多九个 usin ...
- rust struct 初始化的语法糖 - struct update syntax
rust语法提供了..操作符来实现struct更新的语法糖,参见Struct Update syntax. 废话少说,直接定义一个学生的struct: #[derive(Default, Debug) ...
- 华为MateBook X Pro:破万年不变,换一眼万年
作为办公必需品,笔记本电脑的外型设计多年没有太大变化,用户的选择首要标准还是功能.性能.今年暑期,笔记本市场有了一道新风景--华为MateBook X Pro 2022微绒典藏版. 华为的设计基因,在 ...
- 【GitHub每日速递 251010】Zen MCP:一键 orchestrate 多 AI 模型,代码开发协作新革命!
开源神器 Infisical:一站式解决秘密管理.PKI.KMS 等难题! Infisical 是一个开源的密钥管理.PKI 和 SSH 访问平台.简单讲,它帮助团队安全地存储和管理敏感信息(如密码. ...
- LockBit病毒oracle数据库恢复---xifenfei
联系:手机/微信(+86 17813235971) QQ(107644445) 标题:LockBit病毒oracle数据库恢复 作者:惜分飞版权所有[未经本人同意,不得以任何形式转载,否则有进一步追究 ...
- Jenkins Shared Library 添加第三方包支持
背景 我们在写 Jenkins 的 Shared Library 时,有时候需要引用外部的一些 jar 包,比如 maven central 的一些 lib 等. 具体到我们的例子,需要引用 Gson ...
- C#不通过byte[],直接对内存映射文件复制内存
背景 多个进程直接需要传递大量图片,所以对性能要求较高.支付复制内存显然比转成byte[]再复制优越. 命名空间 using System; using System.Diagnostics; usi ...
- 读loki有感 : 编译事(而不是运行时)的断言(assert)
本文环境:VS2005(VC8) 问题一:如果int不是64位,编译无法通过. char test[sizeof(int)==8];//如果此行编译不过,原因:系统不是64位 原理: 数组的元素不能为 ...
- C++学习笔记(7)
1.创建一个顺序文件与文件输入(追加) #include<iostream> #include<fstream> #include<string> using na ...
- 使用 Github Pages 和 Hexo 搭建博客
一.前言 其实可以通过github.io搭建wiki或者个人博客我挺久之前就知道,不过一直没用,主要是因为已经有一个博客了,没必要再搭一个,不过最近兴起,就搭了个这个附属博客,同步更新主博客的文章. ...