display blob 2 times

Question

There is a way to copy a node with a blob src?

I need to clone the image blob which is over in a new div.

this is what I have when I log my HTML blob element when I over it:

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

or

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

for example. Theses images working correctly.

And if I try to do this, for copying these Html node and put them in a div which have divResult as name :

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

the image not appear in my divResult but the src is here.

Any solution?

Does this answer your question? [Convert blob URL to normal URL](https://stackoverflow.com/questions/14952052/convert-blob-url-to-normal-url) — Józef Podlecki, May 30 '20 at 16:08
I have already look at this post, but I don't understand the first answer — samuel, May 30 '20 at 16:14

score 0 · Answer 1 · answered May 30 '20 at 16:22

0

Ensure divResult doesn't have a style which causes elements inside it to be hidden.

Example

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>

answered May 30 '20 at 16:22

Józef Podlecki

10,453
5
24
50

thanks for your answer, but actually I already have an url like `blob:http://127.0.0.1:5500/ac9a2a0d-2d9b-41e9-96c5-4894292aef3b` ans not like `https://i.picsum.photos/id/440/50/50.jpg`, so you're code doesn't work.. – samuel May 30 '20 at 16:34
That's what the code is doing after image is fetched, it changes to `blob:...` with `URL.createObjectURL` – Józef Podlecki May 30 '20 at 16:38
What if you inspect `#divResult` in dev tools? What does it show? Perhaps you have different reference and it is putting it in a completely different element – Józef Podlecki May 30 '20 at 16:39
funct.js:86 GET blob:http://127.0.0.1:5500/5d08f214-3029-4fa4-9fa9-676525340505 net::ERR_FILE_NOT_FOUND – samuel May 30 '20 at 16:45

display blob 2 times

1 Answers1