Skip to content
Advertisement

create image in React from backend dataURL

I’m trying to get a snapshot of HTML canvas like so:

JavaScript

which seems to be working, and connected properly to the database.

But I can’t figure out how to use the dataURL to create an image component on the React frontend

I’m able to fetch them from the backend just fine and log the dataURL.

JavaScript

I guess I’m just not sure of the next steps to get each dataURL into a element

Here is my getPics function:

JavaScript

and its used just like:

JavaScript

Advertisement

Answer

Put the images into a state and put the fetch into a useEffect() function.

JavaScript

Mapping is the correct way to go… when mapping you can throw the data into a img element, this will render every image onto the page. the key value is for react to know the difference between each element.

JavaScript
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement