通过JavaScript克隆图像base64失败

Question

I need to clone an html block which has some imgs inside, just like this:

<span class="slides_container" id="rotator1">
    <div class="slide">
      <div class="photoInfo">imagenes 1</div>
       <img src="data:image/jpg;base64,/9j...FHFf/Z" width="600" height="400" alt="pic1">           
      </div>
   </div>
   <div class="slide">
      <div class="photoInfo">imagenes 1</div>
       <img src="data:image/jpg;base64,/9j...FHFf/Z" width="600" height="400" alt="pic2">           
      </div>
   </div>
</span>

Then I use this jquery code to clone this block:

$('#mediaViewerSlides').append(content.clone());

As result, only the first image cloned on its src attr has at the end of the base64 string something like a GET parameter like this: src="...FHFf/Z?133487557212" I can't get know how this value appears or why, obviously this extra data on the base64 string makes the image invalid, and it breaks everything else.

Answer 1

I'm not sure why the time-stamp is being added, but instead of cloning the whole object, maybe you can create a new one and set it's src attribute to the same value:

$('#mediaViewerSlides').append('<img src="' + content.attr('src') + '" width="600" height="400" />');

This assumes that content is a reference to one of the images with a base64 source.

If the time-stamp is being added to the pre-cloned element then you could strip it from the src when you create the new element:

var source = content.attr('src');

//if the source includes a question-mark, then get everything before the character
if (source.indexOf('?') > -1) {
    source = source.split('?')[0];
}
$('#mediaViewerSlides').append('<img src="' + source + '" width="600" height="400" />');

Answer 2

I'm not sure why you HAVE to clone this div. Why don't you just keep a reference to the source of the image and add that to a cloned version of the container.

Answer 3

I think there is something wrong either with your code or the Base64 string.

Just found a random image on the web, converted it to base64 here , and cloned it in this fiddle with no such problems, so it's probably not jQuery adding the querystring.