影视应用部分内容无海报时，如何编写三元语句显示无图提示

你之前的代码无法正常运行，核心错误有两点：

• 把三元判断逻辑写在了img标签的src属性值内部，src属性只接受合法的图片地址字符串，不能直接嵌套<h4>这类HTML标签
• 判断逻辑的位置不对：当没有海报路径时，不应该继续渲染img标签，而是直接渲染占位提示内容。

把三元判断放到标签渲染层级，根据backdrop_path是否存在，选择渲染图片还是占位提示：

<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"/>`
      : `<div class="no-image-placeholder">未找到图片</div>`
    }
  </a>
  <h4>${item.title ? item.title : item.name}</h4>
</div>

补充优化建议 #

• 你可以给.no-image-placeholder添加自定义样式，比如设置和海报一致的固定宽高、灰色背景、文字居中，避免页面布局因为缺图错位。
• 就算提前判断了字段是否存在，也可能遇到图片路径失效、网络错误导致加载失败的情况，可以给图片加onerror事件做二次兜底：

<img 
  src="https://image.tmdb.org/t/p/original/${item.backdrop_path}"
  loading="lazy"
  alt="movie poster"
  onerror="this.outerHTML = '<div class=\'no-image-placeholder\'>未找到图片</div>'"
/>

内容的提问来源于stack exchange，提问作者trevinshu