Question

我需要克隆一个内部有一些imgs的html块，就像这样：

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

然后我使用这个jquery代码来克隆这个块：

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

结果，只有在其src attr上克隆的第一个图像在base64字符串的末尾有类似于GET参数的内容：src =“... FHFf / Z？133487557212” 我无法知道这个值是如何出现的或为什么，显然这个base64字符串上的额外数据会使图像无效，并且会破坏其他所有内容。

Answer 1

我不确定为什么要添加时间戳，但是不是克隆整个对象，也许你可以创建一个新的并将它的src属性设置为相同的值：

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

这假设content是对其中一个带有base64源的图像的引用。

如果时间戳被添加到预克隆元素，那么您可以在创建新元素时从src中删除它：

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

我不确定为什么你有来克隆这个div。为什么不保留对图像源的引用，并将其添加到容器的克隆版本中。

Answer 3

我认为你的代码或Base64字符串有问题。

刚刚在网上发现了一个随机图片converted it to base64 here，并在this fiddle中克隆了它没有出现这样的问题，所以可能不是jQuery添加了查询字符串。

通过javascript克隆图像base64失败

3 个答案: