使用YouTube Data API v3加载缩略图时出现404错误，求排查

你的404错误核心原因是模板字符串使用错误，导致变量没有被正确解析，浏览器把${video.snippet.thumbnails.high.url}当成了本地文件路径去请求，自然找不到资源。

具体问题点： #

• 你用单引号'包裹了HTML片段，而ES6模板字符串必须用**反引号`**才能让${变量}语法生效。单引号里的${}会被当作普通文本，不会替换成实际的缩略图URL。
• 你手动转义了<和>，在模板字符串里完全不需要，直接写原始HTML标签即可。

修正后的代码： #

fetch("https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCVSUF_SaDCLze2KiVrNkmrw&maxResults=10&order=date&key=AIzaSy...")
.then((result)=>{
    return result.json()
}).then((data)=>{
    console.log(data)
    let videos = data.items
    let container = document.querySelector(".youtube-container")
    for(video of videos)
    {
        // 把单引号换成反引号，直接写<和>
        container.innerHTML += `<img src="${video.snippet.thumbnails.high.url}">`
    }
})

额外优化提示： #

如果视频列表项较多，建议先拼接好所有HTML字符串再一次性赋值给innerHTML，比循环里反复用+=性能更优，示例：

let html = '';
for(video of videos) {
    html += `<img src="${video.snippet.thumbnails.high.url}">`;
}
container.innerHTML = html;

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