我可以使用 JS Fetch API 檢索 3 張影像（apple.jpg、banana.jpg、kiwi.jpg）：promise 已實作并已創建 blob，但只能渲染 kiwi.jpg 影像中的一張，而剩余的兩張 jpg 影像可能由于重疊而無法渲染. 請告知我缺少的任何概念并提供幫助。
注意：上面提到的所有 .jpg 影像都與 HTML 和 JS 代碼位于同一位置。
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 class="someImage" src</img>
<!--below banana.jpg image should appear -->
<img src=" " />
<!--below kiwi.jpg image should appear -->
<img src=" " />uj5u.com熱心網友回復：
如果您確實需要將其作為 blob 處理并創建自己的 url 參考，那么您可以這樣做。為了這個片段的目的，我創建了一個占位符路徑陣列。您需要抓取所有影像元素并將索參考作路徑陣列和元素陣列之間的關系。如果您希望 URL 物件保留，您也不能在之后銷毀它。不過，我將包括一種僅更改 src 的方法。
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 class="someImage" />
<!--below banana.jpg image should appear -->
<img src=" " />
<!--below kiwi.jpg image should appear -->
<img src=" " />這里我們只是將 src 屬性添加到元素中。無需以 blob 或類似的形式獲取。
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 class="someImage" />
<!--below banana.jpg image should appear -->
<img src=" " />
<!--below kiwi.jpg image should appear -->
<img src=" " />uj5u.com熱心網友回復：
看起來您只是在更新第一個<img />標簽，因為它是唯一具有類屬性的標簽。以下是一些額外的建議：
- 確保使用 a
</tag>或 a正確關閉 HTML 標記/>，這可能會導致不同 Web 瀏覽器中出現意外和不一致的行為 - 確保您的代碼中沒有多余的括號。在某些情況下，這不是問題，但在其他情況下，它會引起很多頭痛！以下是有關如何更改代碼的建議：
<!--below apple.jpg image should appear -->
<img class="appleImage" src />
<!--below banana.jpg image should appear -->
<img class="bananaImage" src />
<!--below kiwi.jpg image should appear -->
<img class="kiwiImage" src />
并將您的 javascript 更改為以下內容：
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)
}
)}
uj5u.com熱心網友回復：
<!--below apple.jpg image should appear -->
<img class="someImage" src</img>
<!--below banana.jpg image should appear -->
<img src=" " class="soimeImage" />
<!--below kiwi.jpg image should appear -->
<img src=" " class="someImage" />
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)
}
)}
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517442.html