Attempting to show an image from a NodeJS backend in my React app is problematic as it returns buffer data.
<MyStyledImage source={imgContent} />
Any recommended fixes?
hey guys, have u tried converting the buffer to a base64 string so it can be used as an image src? i had a similar issue and a simple conversion did the trick. curious to know if this approach brigs u success or if there are any snags?
Another method that worked for me was to adjust how the image is transmitted from the backend. Instead of sending a buffer directly to the client, I created an endpoint that returns the image stream with proper content-type headers. On the React side, I simply used the URL of that endpoint as the source for the image tag, which allowed the browser to properly handle and display the image. This approach avoids manual transformation in the client and simplifies error tracking by keeping data handling on the server.
hey folks, have u trd using url.createObjctURL for your image blob? i noticed it can be more efficient than converting to base64 and avoids some hiccups. anyone else experimented with this approach or got other ideas?
maybe try directly serving the image with an url rather than sending a buffer? it simplified my case and avoided extra conversion en route to react. could also be a cors issue so check that out too