ReactJS, rendering base64 string in <img> tag gives error ERR_INVALID_URL

Question

I am attempting to render a few server generated images (matplotlib graphs to be specific) to a ReactJS module without saving files on the server. The approach I took was to use base64 to generate an image string.

When the time comes to render my image in a React component, I use:

render(){
  const chart1 ="data:image/png;base64," + this.props.matchPlot1
  return <div>
      <img src={chart1} />
  </div>
}

but unfortunately I am greeted with:

GET data:image/png;base64,b'iV... ...CYII=' net::ERR_INVALID_URL

in the javascript console. From what I understand, somewhere along the line the the resulting HTML thinks that I'm specifying an external hyperlink, when in fact I just want to use the actual decoded base64 string as the image. I have seen solutions for Angular (img ng-src="") and for React-Native (Image /), but haven't found a solution for ReactJS.

I am using ReactJS 15.1.0 and JSXTransformer v0.13.3 client-side rendering. As for my webserver, if relevant, is Flask with Python3.

Any help, or alternate strategy to produce an image without saving a copy on the server is appreciated! (PS. I've used D3 to draw graphs of the data client-side, but with SVGs there are too many points and performance is terrible. I've look into converting the SVGS to canvas but it's more work than I was hoping to deal with right now)

Edit: I should have looked at the string more closely. My server response is an ajax request and in Python3 (maybe 2?) a bytestring is not json serializable. I converted it to a str as str(plots[0]). This accidentally added a b'{string}' wrapper around my base64 object, as evidenced in the console response. I guess that syntax was enough to throw chrome off. That, and the red herrings with angular and react-native solutions led me to believe it was a react problem when it fact it's a python string problem. It's working now, and I appreciate the input.

Chris, I think you might have just forced me to answer my own question. I carelessly converted a bytes string to str() in python3 in order to add it to a json string. The resulting string didn't show up when I tried to convert it online. Then I pasted the original bytes string and it worked. I set my initial react state to the string, and now it works. As far as adding the string, whats the easiest way to go about that? It's 15 pages of text — Daniel Hitchcock
– Daniel Hitchcock, Commented Aug 17, 2017 at 23:09

Chris · Accepted Answer · 2017-08-17 23:11:04Z

3

Without the full string, it's hard to tell with certainty what could be wrong.

However, I think I might've found the issue:

GET data:image/png;base64,b'iV... ...CYII=' net::ERR_INVALID_URL

Based on the above error that you're getting, it looks like you might be missing an extra = at the end of your URI, depending on the length.

Try changing it so that it ends with CYII== and not CYII= as it seems to be currently.

Alternatively, the variable matchPlot1 might somehow be incorrect. If it has //, make sure to escape the comment.

answered Aug 17, 2017 at 23:11

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS, rendering base64 string in <img> tag gives error ERR_INVALID_URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related