I am making a ajax request in jquery as below. This ajax request gets images dynamically. And the image is always different image depending on the value of num

$.ajax({
    type: "POST",
    url: "ABC.php?num=1",
    success: function(response) {
          if(response == 1) {
                //some code
          }
          else {
                // Here I am not able to set image content.
                $("#image").attr("src", "data:image/png;base64,' + response + '");
          }
    }
});

Is there a way to set image content using the response of the ajax request. Thanks.

I am making a ajax request in jquery as below. This ajax request gets images dynamically. And the image is always different image depending on the value of num

$.ajax({
    type: "POST",
    url: "ABC.php?num=1",
    success: function(response) {
          if(response == 1) {
                //some code
          }
          else {
                // Here I am not able to set image content.
                $("#image").attr("src", "data:image/png;base64,' + response + '");
          }
    }
});

Is there a way to set image content using the response of the ajax request. Thanks.

• javascript
• jquery
• ajax
• image
• base64

3 Answers 3

You have some unneeded single quotes there. Use this:

$("#image").attr("src", "data:image/png;base64," + response);

Try this

$('#image').html('<img src="data:image/png;base64,' + response + '" />');

You need to send the image back base64 encoded, look at this: http://php/manual/en/function.base64-encode.php

I rarely use jquery but this worked for me: $(".avatar").html('<img src="' + user.avatar_url + '" />'); Here i am adding an image to a class and avatar_url es from the response from the server.