Не могу понять, как загрузить изображение на веб-страницу и отобразить его. ⇐ JAVA

[Anonymous]

Я часами гуглил, пытаясь понять, как загрузить изображение PNG из Java-сервлета с помощью JAX-RS во внешний интерфейс React MUI. Проблема в том, что все примеры предназначены только для одной стороны и не говорят о том, как читать/отправлять их с другой стороны. Это мой тестовый код:
Сервлет Java 17 с использованием закладок Джерси:

Код: Выделить всё

@GET // get data
@Path("downloadPanoramas") // file/downloadPanoramas is URL
@Produces("image/png") // what format we be use
public Response getPanoramas() {
Response result;
try {
// Define a suggested filename
final String fileName = "pano_vis_a_panorama.png";
java.nio.file.Path panoramaPath = get(YamlReader.getImagePath(), fileName);

// Create the JAXRS response
// Don't forget to include the filename in 2 HTTP headers:
//
// a) The standard 'Content-Disposition' one, and
// b) The custom 'X-Suggested-Filename'
//
Response.ResponseBuilder builder = Response.status(Response.Status.OK).type("image/png")
.header("Content-Disposition", "attachment; filename=" + fileName)
.entity(new StreamingOutput(){
@Override
public void write(OutputStream output) throws IOException, WebApplicationException {
output.write(fileContent);
output.flush();
}
});

// All Done.
result = builder.build();
} catch (RuntimeException ex) {
JsonObject resultMsg = Json.createObjectBuilder().add("status",
Json.createObjectBuilder().add("code", 1)
.add("message", ex.getMessage())
.build())
.build();
return Response.status(Response.Status.BAD_REQUEST).entity(resultMsg.toString()).build();
}

return result;
}

Это считывает запрос на получение, а затем отправляет обратно это изображение, которое я хочу отобразить на своей веб-странице. Я вижу, что в большинстве сообщений говорится об использовании типа ответа «arraybuffer», но никто не говорит о том, как это сделать на бэкэнде. Я имитирую примеры запроса для создания файла внешнего интерфейса js, но он не может прочитать ответ.
Внешний интерфейс React

Код: Выделить всё

import Typography from "@mui/material/Typography";
import React, {useEffect, useRef, useState} from "react";
import Box from "@mui/material/Box";
import axios from "axios";
import Button from "@mui/material/Button";
import {Buffer} from 'buffer';

const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
const SERVLET_NAME = process.env.REACT_APP_SERVLET_NAME;

function PanoramaTool(props) {
const [image64, setImage64] = useState("");

const url_DP  = API_ENDPOINT + "/" + SERVLET_NAME + "/rdt/file/downloadPanoramas"; // Download panorama file request

const getImage = () => {
axios({
method: 'GET',
url: url_DP,
responseType: 'arraybuffer',
}).then((response) => {
setImage64(Buffer.from(response.data, "binary").toString("base64"))
}).catch(function(error) {
console.log(error);
})
};

/**
Create the step layout.
*/
// noinspection JSValidateTypes
return (


Panorama Configuration



[img]{`data:image/jpeg;charset=utf-8;base64,${image64}`} alt=[/img]

panorama




);
}

export default PanoramaTool;

Когда ответ читает PanoramaTool, он переходит к catch и не может прочитать png-файл, который я хочу сохранить в image64, чтобы я мог его отобразить. Ошибка: «Буфер не определен».


Подробнее здесь: https://stackoverflow.com/questions/785 ... display-it