幾天以來，我一直在為 javascript 中的 img 替換問題而苦苦掙扎。我正在使用課程撰寫此應用程式，但在本課程中，視頻 img 替換效果很好。可能主要原因是我獲取了其他 API。這是我學習如何解決此類問題的機會，但幾天以來我找不到答案。
這是我的代碼： https ://codepen.io/sowicz/pen/xxjyXVO
問題出在下面的這一行中。由于無法加載來自 json 的某些連續資料（GET 404 錯誤），我想將 img 替換為來自 pixabay 的一些 img。不幸的是，它不起作用。我無法解決這個問題。
if(serials.Poster) {
imgSrc = serials.Poster;
} else {
this.imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
}
如果缺少某些東西，我很抱歉，我是編碼新手。非常感謝您，祝您天天快樂！
uj5u.com熱心網友回復：
this.imgSrc = 與 相同showsApp.imgSrc。問題是您imgSrc用作本地變數來呼叫方法getShowBoxByTemplate。
我想我們應該把它改成
let imgSrc = null;
if (serials.Poster) {
imgSrc = serials.Poster;
} else {
imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
}
或者
const imgSrc = !!serials.Poster ? serials.Poster : "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
或者
const imgSrc = serials.Poster || "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
如果您的影像以 404 代碼回應，您可以使用此處onerror示例中的事件
<img src="${imgSrc}" onerror="this.src='https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg'" alt="">
uj5u.com熱心網友回復：
如果您的 API 資料未提供影像 URL，您將嘗試使用備用影像。請注意，由于提供了影像 URL（盡管它指向不存在的位置），因此在這種情況下不會執行 else-Block。這是因為
if ( serials.Poster )
只需檢查屬性 Poster 是否存在于物件“serials”中。它完全忽略這是否包含有效的 URL 甚至指向現有位置。
如果你想在 vanilla JS 中檢查該影像是否可以從它的 URL 加載，我建議你做一個 XHR 并檢查 20X 范圍的狀態。有關更多詳細資訊，請參閱Javascript 中 URL 的 HTTP 狀態代碼。
我建議您單獨嘗試，以便更好地縮小問題范圍。您可以使用
let serials = {
"Poster": "https://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
}
if ( serials.Poster ) { // TODO: improve this
imgSrc = serials.Poster;
} else {
imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg";
}
console.log("imgSrc:", imgSrc);
并嘗試如果你拼錯海報會發生什么，以理解我的意思。
當您打算練習和學習時，我不會提供不為您保留此學習機會的可能解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/512428.html
上一篇：Javascript不會替換影像