We’re encountering difficulties displaying images fetched from a Java Spring backend in a React frontend. Despite successfully retrieving the image data from the backend, we’re unable to render it in the tag on the frontend.
here is what my back send:
@PostMapping("/getProduct/{type}")
@ResponseBody
public ResponseEntity<byte[]> getProduct(@PathVariable("type") String productName) {
String filePath = DIRECTORY_UPLOAD + PRODUCTS + File.separator;
List<File> files = findAllFile(filePath);
File productFile = files.stream()
.filter(f -> f.getName().contains(productName))
.findFirst()
.orElse(null);
if (productFile != null && productFile.exists()) {
try {
byte[] imageBytes = Files.readAllBytes(productFile.toPath());
return ResponseEntity.ok()
.contentType(MediaType.IMAGE_PNG)
.body(imageBytes);
} catch (IOException e) {
e.printStackTrace(); // Handle exception appropriately
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
} else {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
and how my front treat it :
getImage(type: string): Promise<Response> {
return axios.post("api" + PATH_UPLOAD +"/getProduct/" + type.replace("/",""), {
headers: {
...authHeader(),
"Content-Type": "multipart/form-data",
},
});
}
useEffect(() => {
const fetchImage = async () => {
await ProductsService.getImage(data.type).then(async res => {
if (res.status === 200) {
const file = new Blob([res.data], {
type: "image/png",
});
//Build a URL from the file
let fileurl = URL.createObjectURL(file);
console.log(fileurl);
setProductImgURL(fileurl);
}
} )
} ;
fetchImage();
} , []);
{
productImgURL === "" ? "" : <img src={productImgURL} alt="Image Produit" className="image" style={{width: "25%", height: "25%"}}/>
}
Verified backend endpoint functionality by inspecting network requests and responses.
Implemented frontend logic to fetch image data and render it in the tag.
Ensured error handling in both frontend and backend code.
Used different way to create a blob, and tried directly printing res.data