<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>
So this is my code and I trying to do a ternary statement that basically says if there is no image then insert a message saying no image found but I am not sure how to do that.
Update:
This is what I tried but so far it doesn't work.
<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>
Assuming that your HTML is within a JavaScript template literal and you only want to show the image if item.backdrop_path is truthy, you'll need to have your ternary statement evaluate to either <img> or <h4> element in their entirety.
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();
I strongly advise against creating strings of HTML. Instead, use the DOM methods to create actual elements
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)
);
add this after your 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>
meaning: try to get the image if available, and if it's not, change the a's inner html to the not found h4
P.S. I don't have the whole page so I can't test my solution.