Some shows/movies in my tv/movie app do not have posters. How do I write a ternary statement that sh-CodePudding

<div  data-id="${item.id}" data-type="${item.media_type}">
            <a href="#" id="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  data-id="${item.id}" data-type="${item.media_type}">
            <a href="#" id="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>

CodePudding user response：

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  data-id="${item.id}" data-type="${item.media_type}">
    <a href="#" id="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)
);

CodePudding user response：

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.