Not allowed to load local resource: file:///C:/Users/%E7%8E%8B%E5%AD%90%E4%BB%AA/.eladmin/file/tmp/path/to/image/%E4%BA%91%E8%AE%A1%E7%AE%97-4.png报错怎么解决

该错误是因为浏览器限制了加载本地文件资源的能力，而`file:///C:/Users/王子仪/.eladmin/file/tmp/path/to/image/云计算-4.png`是一个本地文件路径。

为了解决这个问题，你可以将图片地址改为可以通过 HTTP 协议访问的 URL。有两种常见的方法可以实现这一点：

1. 将图片存储到可以通过 HTTP 访问的文件服务器上，例如将图片上传到服务器上的某个目录，然后通过服务器的 URL 来访问该图片。这样，前端就可以直接使用服务器上的图片 URL 来显示图片。

2. 在后端代码中，将图片以字节流的形式返回给前端。前端可以通过 AJAX 请求获取到字节流，并将其转换为 Base64 编码的字符串。然后，可以使用 Data URI Scheme 将 Base64 编码的字符串作为图片的源来显示。

以下是第二种方法的示例代码（使用 Java Spring Boot 框架）：

import org.apache.commons.io.IOUtils;

// ...

@GetMapping(value = "/image/{imageName}")
public ResponseEntity<byte[]> getImage(@PathVariable("imageName") String imageName) throws IOException {
    // 根据图片名称获取图片路径
    String imagePath = "C:/Users/王子仪/.eladmin/file/tmp/path/to/image/" + imageName;
    File imageFile = new File(imagePath);

    // 将图片文件转换为字节数组
    byte[] imageBytes = IOUtils.toByteArray(new FileInputStream(imageFile));

    // 设置响应头，告诉浏览器返回的是图片类型
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.IMAGE_PNG);

    // 返回图片字节数组和响应头
    return new ResponseEntity<>(imageBytes, headers, HttpStatus.OK);
}

在前端代码中，使用 AJAX 请求来获取图片字节数组，并将其转换为 Base64 编码的字符串，然后将该字符串作为图片的源来显示：

// 假设从后端获取到的图片名称是 '云计算-4.png'
var imageName = '云计算-4.png';

// 发送 AJAX 请求获取图片字节数组
$.ajax({
    url: '/image/' + imageName,
    method: 'GET',
    responseType: 'arraybuffer',
    success: function (data) {
        // 将字节数组转换为 Base64 编码的字符串
        var base64Image = btoa(new Uint8Array(data).reduce(function (data, byte) {
            return data + String.fromCharCode(byte);
        }, ''));

        // 设置图片源为 Base64 编码的字符串
        var imgElement = document.getElementById('image');
        imgElement.src = 'data:image/png;base64,' + base64Image;
    }
});

请注意，在使用第二种方法时，需要确保后端代码中返回的图片类型与前端代码中设置的图片类型一致。以上示例中，返回的是 PNG 图片。如果你使用其他类型的图片（例如 JPEG），请相应地调整代码。