not able to render all images-CodePudding

I can retrieve 3 images (apple.jpg, banana.jpg, kiwi.jpg) using the JS Fetch API: promises fulfilled and blob created but can render only one the kiwi.jpg image and not the remaining two jpg images maybe because of overlapping . Kindly advise any concepts I am missing and help.

Note: All the above mentioned .jpg images are present in the same location as the HTML and JS code.

const myImage = document.querySelector(".someImage");
var x=["apple.jpg","banana.jpg","kiwi.jpg"]
x.forEach((x1)=>{ 
myRequest = new Request(x1)
fetch(myRequest).then (async response => {
myBlob=await response.blob() 
objectURL = URL.createObjectURL(myBlob)
myImage.src = URL.createObjectURL(myBlob)
URL.revokeObjectURL(objectURL)
} 
)}
)

img{
display:inline
}

 <!--below apple.jpg image should appear -->
 <img  src</img>
 <!--below banana.jpg image should appear -->
 <img src=" " />
 <!--below kiwi.jpg image should appear -->
 <img src=" " />

CodePudding user response：

If you really need to handle this as blobs and create your own url reference then you can do this. I created an array of placeholder paths for the purposes of this snippet. You need to grab all the image elements and use the index as a relationship between the array of paths and array of elements. Also you can't destroy the URL object afterwards if you want it to stay. I'll include a way to just change the src as well though.

const myImages = document.querySelectorAll("img");
//const imagePaths = ["./apple.jpg", "./banana.jpg", "./kiwi.jpg"];
const placeholderUrl = "https://www.gravatar.com/avatar/5c9a8b9f51420f0a4f548de5a6e39bd3?s=64&d=identicon&r=PG";
const imagePaths = Array(3).fill(placeholderUrl);
imagePaths.forEach((path, i) => { 
    fetch(path).then(response => response.blob()).then(blob => {
        const objectURL = URL.createObjectURL(blob);
        myImages[i].src = objectURL;
        //URL.revokeObjectURL(objectURL);
    });
})

img {
  display:inline
}

<!--below apple.jpg image should appear -->
 <img  />
 <!--below banana.jpg image should appear -->
 <img src=" " />
 <!--below kiwi.jpg image should appear -->
 <img src=" " />

Here we just add the src attribute to the elements. No need to fetch as a blob or anything of the sort.

const myImages = document.querySelectorAll("img");
//const imagePaths = ["./apple.jpg", "./banana.jpg", "./kiwi.jpg"];
const placeholderUrl = "https://www.gravatar.com/avatar/5c9a8b9f51420f0a4f548de5a6e39bd3?s=64&d=identicon&r=PG";
const imagePaths = Array(3).fill(placeholderUrl);
imagePaths.forEach((path, i) => { 
    myImages[i].src = path;
})

 <!--below apple.jpg image should appear -->
 <img  />
 <!--below banana.jpg image should appear -->
 <img src=" " />
 <!--below kiwi.jpg image should appear -->
 <img src=" " />

CodePudding user response：

It looks like you are only updating the first <img /> tag since it is the only tag with a class attribute. Here are a few extra recommendations:

Make sure you close your HTML tags correctly, either with a </tag> or a />, this can lead to unexpected and inconsistent behavior in different web browsers
Make sure you don't have extra brackets in your code. In some cases, this will not be an issue, but in other cases, it can cause a lot of headache! Here is a suggestion on how you can change your code:

<!--below apple.jpg image should appear -->
 <img  src />
 <!--below banana.jpg image should appear -->
 <img  src />
 <!--below kiwi.jpg image should appear -->
 <img  src />

and change your javascript to something like this:


var x=["apple","banana","kiwi"]
x.forEach((x1)=>{ 
    myRequest = new Request(x1   ".jpg")
    fetch(myRequest).then (async response => {
        myBlob=await response.blob() 
        objectURL = URL.createObjectURL(myBlob)
        const myImage = document.querySelector("."   x1   "Image");
        myImage.src = URL.createObjectURL(myBlob)
        URL.revokeObjectURL(objectURL)
    } 
)}

CodePudding user response：

 <!--below apple.jpg image should appear -->
<img  src</img>
<!--below banana.jpg image should appear -->
<img src=" "  />
<!--below kiwi.jpg image should appear -->
 <img src=" "  />

const myImage = document.querySelectorAll(".someImage");
var x=["apple.jpg","banana.jpg","kiwi.jpg"]
x.forEach((x1)=>{ 
myRequest = new Request(x1)
fetch(myRequest).then (async response => {
myBlob=await response.blob() 
objectURL = URL.createObjectURL(myBlob)
myImage.src = URL.createObjectURL(myBlob)
URL.revokeObjectURL(objectURL)
}  
)}
)