解决 SpringBoot+Vue 项目中图片 Not allowed to load local resource 问题的两全之策

SpringBoot+Vue 项目中加载本地图片权限问题的由来与解决

问题

在 SpringBoot+Vue 项目中，如果在本地开发环境中使用本地图片，则可能会遇到 "Not allowed to load local resource" 的错误。这是因为浏览器出于安全考虑，不允许加载本地文件。

解决方案一：在后端映射本地路径

一种解决方法是在后端映射本地路径。可以通过 Spring Boot 的 @RequestMapping 注解来映射本地路径。示例代码如下：

@RequestMapping("/images/**")
public void getImages(HttpServletResponse response) {
    String imagePath = "path/to/local/images";
    File file = new File(imagePath);
    try {
        FileInputStream fis = new FileInputStream(file);
        byte[] data = new byte[(int) file.length()];
        fis.read(data);
        fis.close();
        response.setContentType("image/jpeg");
        response.getOutputStream().write(data);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

解决方案二：将图片转为 base64 返回给前端

另一种解决方法是将图片转为 base64 返回给前端。可以使用 Java 的 Base64 类来进行转换。示例代码如下：

public String getImageBase64(String imagePath) {
    String base64Image = "";
    try {
        File file = new File(imagePath);
        FileInputStream fis = new FileInputStream(file);
        byte[] data = new byte[(int) file.length()];
        fis.read(data);
        fis.close();
        base64Image = Base64.getEncoder().encodeToString(data);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return base64Image;
}

然后在前端使用 data:image/jpeg;base64, 作为 img 标签的 src 属性值即可。示例代码如下：

<img src="data:image/jpeg;base64,<%= getImageBase64("path/to/local/image.jpg") %>">

总结

通过在后端映射本地路径或将图片转为 base64 返回给前端，可以解决 SpringBoot+Vue 项目中图片 Not allowed to load local resource 的问题。这两种方法各有优缺点，可以根据自己的需求选择合适的方法。

常见问题解答

1. 为什么浏览器不允许加载本地文件？
   浏览器的安全策略为了防止恶意文件被加载和执行，限制了加载本地文件。

2. 后端映射本地路径的方法有什么限制？
   该方法要求服务器具有读取本地文件的权限，并且可能会受到安全限制。

3. 将图片转为 base64 的方法有什么缺点？
   该方法会增加图片大小，并且在传输过程中可能会增加处理时间。

4. 除了上面提到的两种方法之外，还有什么其他解决方案？
   可以使用代理服务器或 CORS 来解决这个问题，但这些方法可能更复杂或有安全隐患。

5. 为什么使用 base64 会增加图片大小？
   base64 是一种编码格式，将二进制数据转换成 ASCII 字符。这个过程会引入一些额外的字符，从而增加文件大小。