jQuery selector loads images from server

Question

Hi! here is the code:

<script type="text/javascript">
    var ajax_data = 
        '<ul id="b-cmu-rgt-list-videos"><li><a href="{video.url}" '+
        'title="{video.title.strip}"><img src="{video.image}" '+
        'alt="{video.title.strip}" /><span>{video.title}</span></a></li></ul>';

    var my_img = $(ajax_data).find('img');
</script>`

ajax_data is data from a JS template engine where I need to get some part of it. The problem is that jQuery does a GET on the

img src={video.image}: GET /test/%7Bvideo.image%7D HTTP/1.1 (on Firefox Live HTTP headers).
This GET generates a 404 from the server.

Any clues on how to solve this?
Thanks a lot :)

Answer 1

When you create a jquery object from html, it's immediately evaluated (because the document fragment is created), so this:

$("<img src='bob.jpg' />")

Immediately causes a fetch of the image. The way I see it you had 3 quick options (and probably others, but hard to say without more context to your question):

1. Replace {video.image} before creating the jQuery object.
2. Remove src="{video.image}", just find the <img> via the selector you already have and set the src attribute later, like this: $(ajax_data).find('img').attr('src','myImage.jpg');
3. Do everything you want via regex before inserting anything into the DOM.