jQuery qtip - loading an image into the qtip via ajax

Question

I'm using the jQuery qtip plugin. I want the content of the qtip to be an image, loaded dynamically.

The url I'm using works. If I go to the url, I see an image.

However, the qtip shows something... weird. Here is the result:

Any ideas why this would happen?

---

Edit

This is the entire Response Header (via Chrome inspector):

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Length:5690
Content-Type:image/gif; charset=binary
Date:Thu, 09 Sep 2010 17:35:48 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=2
Last-Modified:Thu, 09 Sep 2010 17:35:48 GMT
Pragma:no-cache
Server:nginx/0.8.31
X-Powered-By:PHP/5.2.11

Answer 1

You probably need to point the qTip plugin to an url that will return an html fragment containing a link to the image and not directly to the image. The fragment might look like this:

<div>
    <img src="/images/someimage.jpg" alt="" />
</div>

I don't think that qTip supports fetching images directly. Think of it: an AJAX request is sent and if the server returns a binary array representing the image using javascript this binary array cannot be shown (unless you use the data uri scheme which is not very common).