How to display image in HTML Page

Question

I have a simple HTML page with a Button. Onclick it should show an image through an Ajax call.

It works fine in Postman Rest Client.

But in browser it is showing raw data instead of pic.

HTML

<html>
   <button type="button" id="test" onclick="asset();"> Show Asset </button>
   <div class="result"></div>    
</html>

Ajax

$("#test").on("click", function asset() {
$.ajax({
    type: 'GET',

    url: 'https://url', //get an image
  //url: 'https://url', //get audio file

    beforeSend: function(xhr) {
        xhr.setRequestHeader('Accept', 'image/png');
        //xhr.setRequestHeader('Accept', 'audio/x-wav');
    },

    success: function(data) {

        $(".result").html(data);

    },
    error: function(e) {
        alert("error post" + JSON.stringify(e));
    }
});
});

Sample Raw data -

�PNG  IHDR�O^�fsRGB���gAMA���a    pHYs���o�d�mIDATx^��{TUG����3���%c�N�8������N'��;Iw'�yu�_�Q�((�����(�E@T@��%B$$�ݝd�����I�$w�xn��3�[_�9ך�Zk��^��Wc

What should I do to get image?

Question 2. How to display/play an audio/video in html page? As of now when I use another audio url...nothing gets disaplyed in browser.

---edit--- @Everyone thank you for your quick solutions. Actually I also need to send an HTTP Header along with the URL. Because the URL may give me an Image/Audio/Video file depending on the Request Header.

In this case how can I display Image/Audio/Video within Webpage?

What is the type of data returned by the url ? A file ? A string ? — Weedoze, Mar 03 '17 at 08:31
If your `url` is just a link to image then no need to make an `ajax` call. Just add a `img` tag to your `html` and modify its `src` attribute value. — vatz88, Mar 03 '17 at 08:34

vatz88 · Accepted Answer · 2017-03-03T08:43:35.863

1

If your url is just a link to image then no need to make an ajax call. Just add a img tag to your html and modify its src attribute value.

var url = "https://placehold.it/350x150"; // some url

$(function(){
  $("#test").click(function(){
    $("#imgId").attr("src",url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
   <button type="button" id="test"> Show Asset </button>
   <div class="result">
    <img id="imgId" src="" />
   </div>
</html>

edited Mar 03 '17 at 08:43

answered Mar 03 '17 at 08:36

vatz88

2,422
2
14
25

Thanks for the quick solution, one similar query, my URL may give me an Image/Audio/Video file depending on the Request Header. In this case how can I display Audio/Video within HTML page? – John Seen Mar 03 '17 at 08:51
Use the appropriate `html` tag and it should work fine. – vatz88 Mar 03 '17 at 08:53
Where should I mention the request header? Accept audio/x-wav in the code? – John Seen Mar 03 '17 at 09:16
See if this helps http://stackoverflow.com/questions/30330856/how-do-i-play-audio-returned-from-an-xmlhttprequest-using-the-html5-audio-api – vatz88 Mar 03 '17 at 09:23
Yeah I have tried that solution, it did not work. Nothing happens onclick – John Seen Mar 03 '17 at 09:31
It's difficult to answer your question without looking at your code. May be you can ask another question with proper code for this case. Also check the `console` if `onclick` logs some error. – vatz88 Mar 03 '17 at 09:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137126/discussion-between-john-seen-and-vatsal). – John Seen Mar 03 '17 at 09:37

score 1 · Answer 2 · answered Mar 03 '17 at 08:36

You don't need to use ajax to load images, images are already loaded asynchronously. So just create an img element and add the src of the image. This works even when the page has been loaded.

$("#test").click(function() {
    $(".result").append("<img src='img/src.png' />");
});

score 0 · Answer 3 · answered Mar 03 '17 at 08:34

0

I think the data in success is a base64 encoded image. In that case you have to show it like:

success: function(data) {
    document.getElementById('img').setAttribute( 'src', data );
}

answered Mar 03 '17 at 08:34

Mayank Pandeyz

25,704
4
40
59

score 0 · Answer 4 · answered Mar 03 '17 at 08:37

Maybe image that is returned from api is base64 format. So you must convert that base64 data into image. Change your success callback like the following.

   success: function(data) {
     var img= new Image();
     img.src = 'data:image/png;base64,'+ data;
     $(".result").appendChild(img);
     }

How to display image in HTML Page

4 Answers4