显示blob 2次

Question

有没有一种方法可以复制带有blob src的节点？

我需要克隆在新的div中结束的图像Blob。

这是我在其上记录HTML blob元素时所拥有的：

<img src="blob:http://127.0.0.1:5500/ac9a2a0d-2d9b-41e9-96c5-4894292aef3b" class="img" style="width: 25%; height: 60px;">

或

<img src="blob:http://127.0.0.1:5500/1cd7dcbf-b6eb-412d-a37e-2c7709815e32" class="img" style="width: 25%; height: 60px;">

例如。这些图像正常工作。

并且如果我尝试这样做，请复制这些HTML节点并将其放在以divResult作为名称的div中：

let clone = srcEl.cloneNode(true);
divResult.appendChild(clone)

图像未显示在我的divResult中，但src在这里。

任何解决方案？

Answer 1

确保divResult的样式不会导致其中的元素被隐藏。

示例

const divResult = document.querySelector("#divResult");
const url = "https://i.picsum.photos/id/440/50/50.jpg"

fetch(url)
  .then((response) => response.blob())
  .then((blob) => {
    const image1 = document.createElement("img");
    image1.src = URL.createObjectURL(blob);
    const parent = document.body;
    
    parent.appendChild(image1);
    
    const clonedElement = image1.cloneNode(true);
    divResult.appendChild(clonedElement)
  });

#divResult {
  
  /* display: none; */
  
  /* visibility: hidden; */
  
  /* height: 0;
   overflow: hidden; */
}

#divResult img {
 /* same as above */
}

<div id="divResult"></div>