3

What's the proper way to load an image using ajax?

I cannot use the usual <img/> tag as I have to pass some specific http headers to the GET request. For that reason, I'm somewhat limited to using Ajax. The headers that I have to pass to the request are credentials. Without that, it won't be possible to get the image files.

I was wondering if there was a way to make an ajax request to load the data into the img tag and still keep the src attribute as the real url of the image. I'm not too much interested into loading the image using a base64 data url.

Improve this question
5
  • Here's a Jquery solution. This could be adapted to vanilla js relatively simply as the concepts are the same. Commented May 28, 2015 at 8:18
  • @Liam thanks I guess the cache workaround might work but it's not certain as headers will be different. Though If my only choice is to load as base64 there is nothing I can do about it :(. Just that having tons of base64 urls might get become heavy in the page. Commented May 28, 2015 at 8:34
  • There's an argument to say that one large HTTP file is better than lots and lot's of small ones (obviously there are variables in that). Browsers can only support a finite number of HTTP channels at one time so it's often preferential to encode in base64, smaller number of HTTP requests with larger files can be faster than lots of HTTP requests with smaller files (as files get bigger the advantage goes down TBF) Commented May 28, 2015 at 8:48
  • Just out of interest, why do you need to pass specific headers? Security? It's pretty unusual. Commented May 28, 2015 at 8:51
  • 1
    @Liam yes I have to pass some credentials to access images on a CouchDB server. Commented May 28, 2015 at 8:58

1 Answer 1

Reset to default
4

Short Answer.... You can't.

The only way you are going to get that image into the <img> tag and still pass specific http headers is via ajax... and the response has to be a base64 data url (or you have to convert it to a base64 data url) that you can put into the <img> tag as the value of the src attribute.

As soon as you change the src attribute of the <img> tag, the browser will request the image from the server... and it won't pass any specific headers.

If you want to display the image, you need either an <img> tag (which gives you the limitations I mentioned) or you can put it as a css background for any element, but the same limitations apply. As soon as you set the url, the browser will load the image without any custom headers passed.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

After looking around, there is a better solution than base64. But none of the possible solutions allow us to preserve the src. Instead of using the Base64 variant, we can instead use a blob url. Having the base64 in the src attribute will make the page much more bigger, but having a blob will keep the url small and have the data load in memory or in cache as a file. Which is as good as a plain url.
The base64 version will make the images exactly 4/3 bigger. Whether it is much depends

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.