javascript - 通过 javascript 克隆图像 base64 失败

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

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

Answer 2

我不确定为什么要添加时间戳，但不是克隆整个对象，也许您可​​以创建一个新对象并将其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 3

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

刚刚在网上随便找了一张图片，在这里转成base64 ，在这个fiddle中克隆了，没有出现这样的问题，所以可能不是jQuery添加了查询字符串。