java - 从 Java spring 获取图像以在 React 中显示

Question

我试图了解如何从 Java Spring 后端获取图像以在小型 React 应用程序中显示。

在React中，我尝试使用以下代码将img src设置为image-data:

const [image, setImage] = useState("");
const onClickHandler = async () => {
    const result = await fetch("http://localhost:8080/gallery/test", {
      mode: "no-cors", // 'cors' by default
    });
    const blob = await result.blob()
    const url = await URL.createObjectURL(blob);
    setImage(url)
    console.log(url)
}

但是 console.log 显示此信息:

blob:http://localhost:3000/620ccbb6-31e5-4a2c-9a61-540beba10d8e

Controller 代码:

@Controller
@RequestMapping("/")
public class GalleryController {
    protected final GalleryService galleryService;

    @Inject
    public GalleryController(GalleryService galleryService) {
        this.galleryService = galleryService;
    }

    @GetMapping(value = "gallery/test")
    public @ResponseBody byte[] getImage() throws IOException {
        return IOUtils.toByteArray(getClass()
            .getResourceAsStream("/gallery/test/test.jpg"));
    }
}

如果我打开http://localhost:8080/gallery/test/，我会得到:

Answer 1

您应该告诉浏览器字节数组的内容类型将是 jpg 图像。
您需要将@GetMapping注释更改为:

@GetMapping(value = "gallery/test", produces = MediaType.IMAGE_JPEG_VALUE)

来自包“import org.springframework.http.MediaType;”的MediaType告诉浏览器 Controller 将响应图像。