Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Unable do display base64 png over 65 MB

I am doing a JAX-RS axios GET and am trying to display the base64 string (length 87394260) the backend returned in REACT. For smaller png the src line works as expected, but when I try to display panorama size pictures of 65 MB or bigger the

<img
  src={`data:image/png;base64,${image64}`}
  alt="panorama.png"
  width='100%'
  height='100px'
/>

doesn’t do anything. There are no error messages in the console and I see the Alt message instead. I tried to set width and height but that also doesn’t help. Is there some workaround to fix this problem? There must be some way to do large files.

I have been searching on Large base64 strings not displaying, but have not found anything.

Tags:

2

Answers


  1. 0
    • Base64 encodes per byte (8 bits) only 6 bits. So you have a 33% loading overhead.
    • For a panorama (photographic) image, the image/png gives a much larger size than image/jpeg.

    So it would be nice to serve images not inline in an img src=data but as file.
    In every case using JPEG can be done, also resulting in a faster load.

    Login or Signup to reply.
  2. 0

    From the comments I decided to create a /var/company/rdt/images directory that tomcat can see as a docDoc directory. I then copy the images to the directory and add a random number to the names like panoramaA123.png. Then the servlet sends the URL links to the pictures to the frontend React project. React sees the url link changes and the image is reloaded. The browser doesn’t have any problem displaying the image. It would be nice to know how the browser is doing that, but my display page is working now.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search