一、报错截图

第一种解决方案

后端映射本地路径

编写MyConfig类

Java代码【MyWebConfig】

package com.wechat.front.utils;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class MyWebConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {//文件磁盘图片url 映射//配置server虚拟路径，handler为前台访问的目录，locations为files相对应的本地路径registry.addResourceHandler("/productImage/**").addResourceLocations("file:///D:/yuancodeProjectImageLocation/productImage/");registry.addResourceHandler("/headPhoto/**").addResourceLocations("file:///D:/yuancodeProjectImageLocation/headPhoto/");registry.addResourceHandler("/questionImage/**").addResourceLocations("file:///D:/yuancodeProjectImageLocation/questionImage/");}}

Controller中获取返回映射路径地址

前端img标签src显示该地址


成功显示图片

第二种解决方案

转base64格式返回

直接在后台把图片转成base64后再传给前端解析就好了！

如果是少量图片可以这么操作，不然图片多的话返回base64由于字符太长，传输速度很慢，会导致卡顿现象、加载慢、加载异常等情况出现。

图片转base64

package com.ckm.yangle.utils;import org.springframework.context.annotation.Configuration;import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java.util.Base64;@Configurationpublic class ImageToBase64 {//src是待传入的图片路径public String ImageToBase64Encode(String src){if (src == "" || src == null) {return "";}File file = new File(src);if (!file.exists()) {return "";}byte [] data = null;try {FileInputStream fis = new FileInputStream(src);data = new byte[fis.available()];fis.read(data);fis.close();} catch (IOException e) {e.printStackTrace();}return Base64.getEncoder().encodeToString(data);}}

base64转图片保存

package com.ckm.yangle.utils;import org.springframework.context.annotation.Configuration;import java.io.FileOutputStream;import java.io.OutputStream;import java.util.Base64;@Configurationpublic class Base64ToImage {//base64Str base64字符串，imgFilePath 待保存的本地路径public boolean GenerateImage(String base64Str, String imgFilePath) {if (base64Str == null) // 图像数据为空return false;try {// Base64解码byte[] bytes = Base64.getDecoder().decode(base64Str);for (int i = 0; i < bytes.length; ++i) {if (bytes[i] < 0) {// 调整异常数据bytes[i] += 256;}}// 生成jpeg图片OutputStream out = new FileOutputStream(imgFilePath);out.write(bytes);out.flush();out.close();return true;} catch (Exception e) {return false;}}}

我们在controller中使用ImageToBase64类

@RestController@CrossOrigin// @CrossOrigin注解 解决uniapp跨域访问后端问题。@RequestMapping("/vueUserLogin")public class VueUserLoginController {@Autowiredprivate JwtUtil jwtUtil;@Value(("${web.head-photo-path}"))private String headPhotoPath;//引入ImageToBase64类 将图片转base64@Autowiredprivate ImageToBase64 imageToBase64;//info 根据token获取用户名和头像@GetMapping("/info")public Object info(@RequestParam("token") String token){//获取token 解密usernameString userName = jwtUtil.getUserName(token);String userPhotoPath = jwtUtil.getUserPhotoPath(token);Map<String, Object> ret = new HashMap<>();ret.put("code", 20000);ret.put("tokenUserName", userName); //返回用户名ret.put("tokenAvatar",imageToBase64.ImageToBase64Encode(headPhotoPath+userPhotoPath+".png")); //图片转成base64，返回用户头像。（headPhotoPath+userPhotoPath+".png"）拼接路径ret.put("message", "info");return ret;}}

headPhotoPath = “D:\yangleProjectImageLocation\headPhoto”
userPhotoPath = “nologin”

这是我保存图片的本地路径

前端在avatar参数前面添加data:image/jpg;base64,即可


成功显示图片