From 52bc6a27a45d71a66b31a214503df9acc23138d6 Mon Sep 17 00:00:00 2001 From: Kara Hoagland Date: Mon, 21 Nov 2022 12:29:06 -0800 Subject: [PATCH] default img if img fails to load --- source/assets/scripts/ReviewCard.js | 9 ++++----- source/assets/scripts/ReviewDetails.js | 10 ++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 3bfe62c..57e5b98 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -138,12 +138,11 @@ class ReviewCard extends HTMLElement { let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("alt","Meal Photo Corrupted"); - if(data["mealImg"] != ""){ - mealImg.setAttribute("src",data["mealImg"]); - } - else{ + mealImg.setAttribute("src",data["mealImg"]); + mealImg.addEventListener("error", function(e) { mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); - } + e.onerror = null; + }); //meal name setup let mealLabel = document.createElement("label"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index a85533b..194ceaf 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -16,12 +16,11 @@ function setupInfo(){ //meal image let mealImg = document.getElementById("d-mealImg"); - if(currReview["mealImg"] != ""){ - mealImg.setAttribute("src",currReview["mealImg"]); - } - else{ + mealImg.setAttribute("src",currReview["mealImg"]); + mealImg.addEventListener("error", function(e) { mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); - } + e.onerror = null; + }); //meal name let mealLabel = document.getElementById("d-mealName"); @@ -78,7 +77,6 @@ function setupUpdate(){ //Set value of each input element to current's values document.getElementById("mealImg").defaultValue = currReview["mealImg"]; - document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; document.getElementById("mealName").defaultValue = currReview["mealName"]; document.getElementById("comments").textContent = currReview["comments"]; document.getElementById("s" + `${currReview["rating"]}`).checked = true;