Menu
I want to set the Image source to a base64 source but it does not work:
JSfiddle.net/NT9KB
<img id="img" src="" /> the JavaScript
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" 
364
One way to convert an image file into a base64 string is to put it into a canvas. Then we can call the canvas's toDataURL method to convert it into a base64 string. We create the getBase64Image function that takes the url string for the URL of the image. Then we create an img eklement with the Image constructor.
Use the img Tag to Display Base64 Image in HTML We can specify the URL of the image in the src attribute of the img tag. We can display base64 images by providing the information about the image in the src attribute. We need to define the accurate content type, content-encoding, and charset in the src attribute.
Convert Images to Base64Just select your JPG, PNG, GIF, Webp, or BMP picture or drag & drop it in the form below, press the Convert to Base64 button, and you'll get a base-64 string of the image. Press a button – get base64. No ads, nonsense, or garbage. Drag and drop your image here!
To display binary data as image in React, we can convert the image's binary data to a base64 URL. Then we can set the src attribute of the img element to the base64 URL. We have the getImg function that makes a GET request to get an image from the imageUrl with fetch . Then we call response.
Remove the line-breaks in the base64:
document.getElementById('img') .setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' ); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
