GitHub Pages与Netlify部署站点无法展示TMDB API获取的图片求助

问题解决方法 #

1. 修正图片URL拼接错误
   你代码中TMDB图片的链接协议头格式错误，https:后缺失双斜杠，将对应img标签的src属性从

src="https:image.tmdb.org/t/p/w500${result.poster_path}"

修改为

src="https://image.tmdb.org/t/p/w500${result.poster_path}"

该问题是导致GitHub Pages加载失败的核心原因：本地live server和浏览器元素面板会自动修正格式不规范的URL，因此这两个场景下图片可正常显示，而GitHub Pages的静态资源解析规则更严格，不会自动补全错误的协议分隔符。

2. 新增防盗链规避配置（可选）
   如果修正链接后仍出现403加载错误，是因为TMDB开启了防盗链校验，你可以给img标签添加referrerpolicy属性：

<img class="trending_image" src="https://image.tmdb.org/t/p/w500${result.poster_path}" alt="" referrerpolicy="no-referrer" />

修改后重新部署到GitHub Pages即可正常加载图片。

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