JavaScript渲染电影卡片时配置assets占位图替代图片加载失败的alt文本

核心思路 #

利用<img>标签原生的错误触发机制，在网上海报资源加载失败的瞬间，直接把图片源替换为项目内置的assets/missing.jpg，替代浏览器默认只显示alt文本的异常展示效果。

具体修改操作 #

• 先确认本地占位图的实际访问路径：因为你的项目结构是assets文件夹直接存放missing.jpg，如果静态资源和入口页面同级，对应的访问路径一般是./assets/missing.jpg（如果是部署在站点根目录，也可以写绝对路径/assets/missing.jpg，根据实际路由调整即可）。
• 修改showMovies函数里模板字符串拼接的图片标签内容，在原有src、alt属性基础上，加上错误事件处理逻辑。
  这里要特意提个大家常踩的坑：如果直接在onerror里赋值新的图片地址，万一这个占位图本身也加载失败了，错误事件会反复触发，陷入无限循环拖慢页面，所以必须在触发资源替换前，先把当前图片元素的onerror事件解绑，断了这个死循环的可能。

代码修改对照 #

你原来模板里拼接的图片标签大概是这个结构：

<!-- 原有代码 -->
<img src="${IMG_PATH}${poster_path}" alt="${title}">

修改后带异常处理的完整写法：

<!-- 修改后的图片标签 -->
<img 
  src="${IMG_PATH}${poster_path}" 
  alt="${title}"
  onerror="this.onerror=null; this.src='./assets/missing.jpg'"
>

代码逻辑拆解 #

• this.onerror = null：先移除当前图片元素的错误事件绑定，就算后续占位图本身出问题加载失败，也不会反复触发报错
• this.src = './assets/missing.jpg'：在线上海报加载失败时，直接把图片源切换成本地的占位图资源

实操注意点 #

• 路径校验：写完代码后可以在浏览器控制台手动把海报src改成一个不存在的地址，模拟加载失败的场景，确认占位图能正常显示，别因为相对路径写错，最后占位图也加载不出来
• 这个实现完全兼容你现有的模板字符串渲染逻辑，不需要额外在全局加图片加载监听，也不用在DOM生成后再逐个给图片元素绑事件，不会和你之前写的评分动态样式匹配、卡片结构拼接的逻辑产生冲突，写起来最方便

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