<div class="trendingItem" data-id="${item.id}" data-type="${item.media_type}"> <a href="#" id="viewItem" class="viewItem"> <img src='https://image.tmdb.org/t/p/original/${item.backdrop_path}' loading="lazy" alt="movie poster"/> </a> <h4>${item.title ? item.title : item.name}</h4> </div>Entonces, este es mi código y estoy tratando de hacer una declaración ternaria que básicamente dice que si no hay una imagen, inserte un mensaje que diga que no se encontró ninguna imagen, pero no estoy seguro de cómo hacerlo.
Actualizar:
Esto es lo que probé pero hasta ahora no funciona.
<div class="trendingItem" data-id="${item.id}" data-type="${item.media_type}"> <a href="#" id="viewItem" class="viewItem"> <img src='https://image.tmdb.org/t/p/original/${item.backdrop_path} ? ${item.backdrop_path} : <h4>No Image Found</h4>' loading="lazy" alt="movie poster"/> </a> <h4>${item.title ? item.title : item.name}</h4> </div>Suponiendo que su HTML está dentro de un literal de plantilla de JavaScript y solo desea mostrar la imagen si item.backdrop_path es true , necesitará que su declaración ternaria se evalúe como elemento <img> o <h4> en su totalidad.
const html = ` <div class="trendingItem" data-id="${item.id}" data-type="${item.media_type}"> <a href="#" id="viewItem" class="viewItem"> ${item.backdrop_path ? `<img src="https://image.tmdb.org/t/p/original/${item.backdrop_path}" loading="lazy" alt="movie poster"/>` : "<h4>No Image Found</h4>" } </a> <h4>${item.title ? item.title : item.name}</h4> </div> `.trim();Recomiendo encarecidamente no crear cadenas de HTML. En su lugar, utilice los métodos DOM para crear elementos reales
const createElement = (tag, attributes, ...children) => { const el = document.createElement(tag); Object.entries(attributes ?? {}).forEach(([attr, val]) => { el.setAttribute(attr, val); }); el.append(...children); return el; }; const div = createElement( "div", { class: "trendingItem", "data-id": item.id, "data-type": item.media_type }, createElement( "a", { href: "#", id: "viewItem", class: "viewItem" }, item.backdrop_path ? createElement("img", { src: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`, loading: "lazy", alt: "movie poster", }) : createElement("h4", null, "No Image Found"), ), createElement("h4", null, item.title ?? item.name) );agrega esto después de tu div
<script> var req = new XMLHttpRequest(); req.open("GET", 'https://image.tmdb.org/t/p/original/'+item.backdrop_path, false); req.send(); if(req.statusCode != 200) { var elem = document.getElementById("viewItem"); elem.innerHTML = "<h4>No Image Found</h4>"; } </script>significado: intente obtener la imagen si está disponible, y si no lo está, cambie el html interno de a al no encontrado h4
PD: no tengo la página completa, así que no puedo probar mi solución.