Vanilla JS中图片加载404时无法替换图片的问题求助

你的问题出在两个核心点：

• 仅判断serials.Poster是否存在，但很多影视API在无有效海报时，会返回"N/A"这类占位字符串，此时你的if条件会误判为有效内容
• 没有处理**URL存在但加载失败（404）**的场景

修正步骤： #

1. 先过滤无效的Poster字段值
   把原判断逻辑改成检查Poster是否为有效链接（排除"N/A"这类无效值），同时注意变量的作用域（你的代码里if分支漏了this.，会导致无法更新组件响应式数据）：

if(serials.Poster && serials.Poster !== "N/A") {
    this.imgSrc = serials.Poster;
} else {
    this.imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg";
}

2. 监听图片加载失败事件
   即使拿到看似有效的URL，也可能出现404错误，需要给图片添加错误监听兜底：
   如果是Vue项目（从代码结构判断），在img标签上绑定@error事件：

<img :src="imgSrc" @error="replaceDefaultImg" />

然后在组件的methods中添加处理函数：

replaceDefaultImg(e) {
    e.target.src = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg";
}

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