Search code examples
javascriptjqueryimagebase64clone

Cloning by javascript an image base64 fails

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.

Solution

  • 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.