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

说明

准备在前后端分离的项目中前端显示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="100" height="100"  alt="无法显示"  />
 
  <!-- <p>{{ viewImgData }}</p> -->
</template>

<script>

export default {
  data() {
    return {      viewImgData:"data:image/png;base64,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",
      };
  },
};
</script>

base64显示的格式：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

遇到的vue3.0和vue2.0语法的问题

我使用的是Vue3.0，但是查了一些资料发现很多的写法都是vue2.0的写法
<img src="https://img-blog.csdnimg.cn/2022010701241258989.png" /> 这种写法在vue2.0是没有问题的，但是到了vue3.0就会不解析了会原样输出，所以会报一个错误：
GET https://img-blog.csdnimg.cn/2022010701241258989.png net::ERR_INVALID_URL

vue3.0的解决方案:
使用属性绑定<img v-bind:src="viewImgData" /> 就可以了。