SpringBoot+Vue3.0前后端分离，在前端显示Base64编码的图片

最新推荐文章于 2025-09-12 10:02:23 发布

原创

最新推荐文章于 2025-09-12 10:02:23 发布 · 2.7w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring #Base64 #vue3.0

本文介绍了如何在前后端分离项目中处理Base64编码的图片，包括在后端将图片转换为Base64字符串并返回给前端，以及在Vue3.0中如何正确显示Base64图片。同时，讨论了Vue2.0和Vue3.0中显示图片的不同之处，提供了Vue3.0中解决图片路径问题的方法。

说明

准备在前后端分离的项目中前端显示Base64的图片，特此在这里记录下来

后端控制器

编写一个控制器方法，用于把图片返回为Base64的编码格式字符串,这里我使用Spring自带的工具类Base64Utils进行转换，控制器只需要返回Base64字符串就可以了。

//把图片转换为Base64的字符串
//String s = Base64.encodeBase64String(FileUtil.readBytes(path));
String s =  Base64Utils.encodeToString(FileUtil.readBytes(path));

//把Base64的字符串转换为图片
byte[] bytes = Base64Utils.decodeFromString(s);
FileUtil.writeBytes(bytes,basePath+"1.png");
System.out.println(s);

前端页面显示

在前端页面可以使用属性绑定的方式显示如：<img v-bind:src="ImageSrc" />

<template>

  <div class="about">
    <h1>This is an about page</h1>
    <md-editor v-model="text" previewOnly />
  </div>


  <!-- <img src="https://img-blog.csdnimg.cn/2022010701241258989.png" width="100%" height="100%" alt="无法显示" /> -->

  
  <img v-bind:src="viewImgData"  alt="无法显示"  />
  <img src="data:image/png;base64,{
    
    { viewImgData2 }}"   width