How To Display An Image That We Received Through Ajax Call?
Solution 1:
To expand on Matt's answer you could use base64 encoded img urls. This is an example from wikipedia of what that img tag would look like:
<imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="alt="Red dot" />
You need a blank image:
<img id="target" src="" />
Your server needs to return the image as a base64 string, then you could do:
$.get("/images/25", function (rawImageData) {
$("#target").attr("src","data:image/gif;base64," + rawImageData);
});
See this MDN reference for more in base64 encoded img urls.
I made a short demo here: http://jsfiddle.net/99jAX/1/
Solution 2:
So it sounds like there is a URL, and it's /images/25
.
As far as I know, you can't display image data that you get from an AJAX call*. But why not just put the URL in an <img>
tag? It doesn't matter to the browser that the image is generated by the server, rather than read from a file.
*EDIT: I was wrong; see gideon's answer if you really need to use an AJAX call (e.g. you need to make a POST request, or send certain headers).
Solution 3:
You want to send the raw image data base64-encoded, combined with the data://
URI scheme.
Solution 4:
I'd bank on it being the same as if you rendered if via PHP or ASP or whatever. just something simple like
$('#elementOfChoice').append('<img src="'+ rawImageData +'" alt="something" />');
though I could be wrong. All depends on whats happening behind the scenes to make that image become what it is. If its gotta pass through a PHP file cause its a base_64 image and needs to be encoded, or whatever the case then that has to be done accordingly.
Solution 5:
Another way you can achieve this is using Blob with ObjectURL. This way the browser creates a temporary pseudo resource with blob url to be used as a src for the image.
For jQuery you need to modify the get request a little, telling that you want a blob as a response. Otherwise it won't work:
$.get({
url: imgUrl,
xhrFields: {
responseType: "blob",
},
success: function (blobData) {
const objectURL = URL.createObjectURL(blobData);
$('#imgPlaceholder1').attr('src', objectURL);
},
});
Or you can do it with pure JS:
fetch(imgUrl)
.then(response => response.blob())
.then(blob => {
const objectURL = URL.createObjectURL(blob);
document.getElementById('imgPlaceholder2').src = objectURL;
});
Tested in Chrome 89.0.4389.114, Firefox 65.0.1 and MS Edge 89.0.774.76.
Have a look at the working example in the snippet below.
functiongetImage() {
const imgUrl = 'https://upload.wikimedia.org/wikipedia/commons/1/19/Crystal_Project_image.png';
// jQuery
$.get({
url: imgUrl,
xhrFields: {
responseType: "blob",
},
success: function(blobData) {
const objectURL = URL.createObjectURL(blobData);
$('#imgPlaceholder1').attr('src', objectURL);
},
});
// Vanilla JSfetch(imgUrl)
.then(response => response.blob())
.then(blob => {
const objectURL = URL.createObjectURL(blob);
document.getElementById('imgPlaceholder2').src = objectURL;
});
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><buttononclick="getImage()">Load image</button></div><br><divwidth="100%"><div><imgid="imgPlaceholder1"alt="Nothing here yet" /></div><br><div><imgid="imgPlaceholder2"alt="Nothing here yet" /></div></div>
Post a Comment for "How To Display An Image That We Received Through Ajax Call?"