Skip to content Skip to sidebar Skip to footer

How To Display An Image That We Received Through Ajax Call?

Web server generates images and sends them to client directly. There are no URLs to the images, for security reasons. For example, if I enter /images/25 URL in the browser server w

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?"