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.

Loïc Faure-Lacroix
  • 13,220
  • 6
  • 67
  • 99
  • [Here's a Jquery solution](http://stackoverflow.com/a/12714338/542251). This could be adapted to vanilla js relatively simply as the concepts are the same. – Liam May 28 '15 at 08: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. – Loïc Faure-Lacroix May 28 '15 at 08: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) – Liam May 28 '15 at 08:48
  • Just out of interest, why do you need to pass specific headers? Security? It's pretty unusual. – Liam May 28 '15 at 08:51
  • 1
    @Liam yes I have to pass some credentials to access images on a CouchDB server. – Loïc Faure-Lacroix May 28 '15 at 08:58

1 Answers1

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.

Ray Perea
  • 5,640
  • 1
  • 35
  • 38
  • 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. – Loïc Faure-Lacroix May 28 '15 at 21:04
  • 1
    The base64 version will make the images exactly 4/3 bigger. Whether it is much depends – Kirill Slatin May 29 '15 at 01:04