SpringBoot+Vue项目中遇到Not allowed to load local resource图片路径问题的两种解决方案（在后端映射本地路径或将图片转base64返回给前端）

一、报错截图

第一种解决方案

后端映射本地路径

编写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;

@Configuration
public class MyWebConfig implements WebMvcConfigurer {

    @Override
    public 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;

@Configuration
public 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;

@Configuration
public 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 {
	@Autowired
	private JwtUtil jwtUtil;
	
	@Value(("${web.head-photo-path}"))
	private String headPhotoPath;
	
	//引入ImageToBase64类 将图片转base64
	@Autowired
	private ImageToBase64 imageToBase64;
	
	//info 根据token获取用户名和头像
	@GetMapping("/info")
	public Object info(@RequestParam("token") String token){
	
	    //获取token 解密username
	    String 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:yangleProjectImageLocationheadPhoto”
userPhotoPath = “nologin”

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

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

成功显示图片