将图片通过byte[]字节数组Base64编码后给前端显示_前端怎样预览byte字节数组_zzzgd816的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

1.base64编码显示图片

一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端

第一种方式简单,不需要服务器,但是这种不太符合现在开发的要求,因为我们通常需要在响应的时候,加上额外的字段表示响应成功状态,以及错误信息,而直接将图片作为流写回前端的话,response是不能携带这些参数的. 第二种方法需要有一个服务器,且上传图片又是一个额外的步骤.

这个时候我们就可以将图片的字节数组通过base64编译后返回前端,前端直接拿了可以显示为图片

获取图片的字节数组看上一篇博客:

java通过Http请求访问网络图片或文件返回byte数组的两种方式

2. 字节数组base64编译

 byte[] bytes;//图片的字节数组
 BASE64Encoder encoder = new BASE64Encoder();
 String data = encoder.encode(bytes);
//data = iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
3. 前端显示
 
前端拿到这个data字符串后,有两种方式显示图片 
先拼接一下前缀, 分别是data:图片类型 ; 编码类型, data字符串数据 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
第一种,css方式: 
div.image {
    width: 99px;
    height: 42px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
第二种,img标签方式 
<img width="900" height="450" src="https://img-blog.csdnimg.cn/2022010612264818856.png"/>
注意,如果图片很大的话,转成的data字符串也很长,我这里一个小图片直接15w的字符了,所以这种方式适合比如logo,验证码这种小图片,又不希望存在服务器的应用场景 
自己拼接了<img>标签后,可以在markdown2直接粘贴看看效果 
                    1.base64编码显示图片一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端第一种方式简单,不需要服务器,但是这种不太符合现在开发的要求,因为我们通常需要在响应的时候,加上额外的字段表示响应成功状态,以及错误信息,而直接将图片作为流写回前端的...
				后端图片资源通过byte在前端显示
byte[] bytes = FileUtils.readFileToByteArray(new File(filePath));
return bytes;
 this.$http({
        url: `服务路径`,
        method: 'get',
        params: {
        	‘key':'value',d
      }).then(({data}) => {
     	 this.ima
public class A {
    //图片到byte数组
    static byte[] image2Bytes(String imgSrc) throws Exception {
        FileInputStream fin = new FileInputStream(new File(imgSrc));
场景：后端传过来一个文件流图片，需要前端在页面展示。打印出来的ArrayBuffer对象：
一开始借鉴了思否上看到的写法，先把获取的ArrayBuffer转成base-64 编码再显示（Uint8Array数组每一位转码后累加再用btoa函数转成base64编码），实现如下：
function getBase64(img) {
    const base64Url...
public class Main {
    public static void main(String[] args) {
        String base64String = "SGVsbG8gV29ybGQ="; // 你要转换的Base64字符串
        byte[] byteArray = Base64.getDecoder().decode(base64String);
        System.out.println("转换后的字节数组：");
        for (byte b : byteArray) {
            System.out.print(b + " ");
在上面的代码中，`base64String` 是你要转换的Base64字符串。`Base64.getDecoder().decode(base64String)` 使用Java 8中的`Base64`类进行解码，将Base64字符串转换为字节数组。最后，使用循环输出字节数组中的每个字节。
请注意，上述代码是使用Java 8提供的`Base64`类进行的示例。如果你使用的是较早版本的Java，请采用其他方式实现Base64解码。
@Test
    public void highLightSearch() {
        HighlightQuery highlightQuery = new SimpleHighlightQuery(new SimpleStringCriteria("customer_name:测试"), PageRequest.of(1, 10));
        highlightQuery.setHighlightOptions(
                new HighlightOptions()
                        .addField("customer_name")
                        .setSimplePrefix("<em style=\"color:teal;\">")
                        .setSimplePostfix("</em>")
        HighlightPage<Customer> highlightPage = solrTemplate.queryForHighlightPage(collectionName, highlightQuery, Customer.class);
        System.out.println(highlightPage.get().collect(Collectors.toList()));
[/code]
搞不懂，为啥我上面那个查不出数据，下面这才可以
[code=java]
@Test
    public void simpleQuery() {
        SimpleQuery simpleQuery = new SimpleQuery("customer_name:测试");
        Page<Customer> page = solrTemplate.query(collectionName, simpleQuery, Customer.class);
        System.out.println(page.get().collect(Collectors.toList()));
[/code]
                踩坑 Kafka异常重试设置KafkaListenerContainerFactory不生效的问题, 同时源码查看kafka重试机制
                    zzzgd816: 
                    直接用 autowired自动配置的bean
                踩坑 Kafka异常重试设置KafkaListenerContainerFactory不生效的问题, 同时源码查看kafka重试机制
                    追风少年李逍遥: 
                    consumerFactory 这个变量怎么赋值的呢？