CODEWITHSUNDEEP
htmlajaximagejqxhr
mehulkar
mehulkar

Reputation: 4964

How to use ajax to set the src of an image?

I need to set some headers when getting an image. The img src attribute does not allow this, so I'm using an XHR request to get the image. However, when I set the src attribute on the img tag after that request completes, it looks like the request is triggered again. Is there a way to cache the image and not trigger the second request?

Sample Code:

$(document).ready(function() {
    var url = 'https://i.imgur.com/bTaDhpy.jpg'
    var file = $.get(url);
    file.then(function(data) {
        $('#foo').attr('src', url);
    });
});

JS Fiddle: https://jsfiddle.net/mehulkar/o4Lcs5Lo/

Note: my question is not about how to set the appropriate headers in the xhr request. My question is how to not trigger another GET from the setting of the src attribute and use the response from the XHR to display the image.

Upvotes: 4

Views: 11423

Answers (2)

user1529413
user1529413

Reputation: 464

I cannot comment here due to reputation points, but here is what I've found on this. I have a local html page that I'm executing via file:/// I can use a $.get to dynamically pull svg files into a variable. The debugger shows this as if it were a standard html node <svg. (I'm using Firefox Developer, but also in Firebug I see the svg file as a node.).

So At this point I have an empty <img that I want to set to my svg file I just don't know how to set the src attribute to the actual document itself. I suppose I could encode to base64.. You might be able to set it using the debugger itself. I couldn't get this to work reliably. Another avenue (for me since I'm using svg) is to clone the object then write it node for node. If you're not using svg perhaps there is some similar hack you could conduct with canvas? Load the image as a sprite then read the colors and set pixels?

Upvotes: 0

RWAM
RWAM

Reputation: 7018

Use the $.ajax for this:

var myImg = $('#foo'),
    mySrc = 'https://i.imgur.com/bTaDhpy.jpg';

$.ajax({
    url: mySrc,
    type: "GET",
    headers: {
        "X-TOKEN": 'xxxxx'
    }
}).done(function() {
    myImg.attr('src', mySrc);   // set the image source
}).fail(function() {
    myImg.hide();    // or something other
});

Upvotes: 3

Related Questions