File in javascript - Angular 19

I have this snippet of code.. i want to know where i'm wrong.. i save an image, that i have stored inside my project, into a new File.. but when i try to reconvert it to an image i get an empty image..


function selectImagesToUpload() {
const input = document.getElementById("product_pics");
const preview = document.querySelector(".preview");
const images = preview.querySelectorAll("div.preview > p");

images.forEach(async item => {

let fn = item.innerText.split(';')[0];
let ext = fn.slice(fn.lastIndexOf('.') + 1, fn.length);

let p = await fetch(fn).then(response => response.blob());
let b = await p.arrayBuffer();
let f0 = new File(new Uint8Array(b), fn, { type: `image/${ext}` });

var reader = new FileReader();
reader.onload = function (e) {
var image = document.createElement("img");
image.src = e.target.result;
document.body.appendChild(image);
}
reader.readAsDataURL(f0);

});
}

This is an example paragraph with the relative url (i set it in the assets of the project) : < p > img/prodotto7.jpg;< /p >

This is the result of the append to the dom : empty image

Can someone help me? This is like a test, i must do it work to go on with my project..

Continue reading...