javascript - Javascript 通过 src 使用变量设置图像时出现问题

Question

我正在尝试使用 src 将图像设置为 html 元素。该图片是 Spotify 专辑封面，我从 Spotify 获取了该专辑的链接(链接如下所示: https://i.scdn.co/image/ab67616d00001e02015c484a7aca592df1a77828 )

这是我的代码:

const getSongData = () => {
    currentlyPlaying= localStorage.getItem("currentlyPlaying");
    songDuration = localStorage.getItem("songDuration");
    currentAlbum = localStorage.getItem("currentAlbum");
    currentArtist = localStorage.getItem("currentArtist");
    currentAlbumCover = localStorage.getItem("currentAlbumCover");

    document.getElementById('currentlyPlaying').innerHTML = currentlyPlaying;
    document.getElementById('songDuration').innerHTML = (`${(songDuration/1000)/60}:${(songDuration/1000)%60}`);
    document.getElementById('currentAlbum').innerHTML = currentAlbum;
    document.getElementById('currentArtist').innerHTML = currentArtist;
    document.getElementById('currentAlbumCover').src = currentAlbumCover;
    //console.log(currentAlbumCover);
}

因此变量 currentAlbumCover 包含链接，但这不起作用，我收到此错误消息:

有趣的是，如果我像这样直接放入链接，它就可以正常工作:

document.getElementById('currentAlbumCover').src = 'https://i.scdn.co/image/ab67616d00001e02015c484a7aca592df1a77828';

Answer 1

您收到的错误显示 404 not found。

这是因为http://localhost:5500正在添加到您想要的链接之前。

你最终会得到 http://localhost:5500/https://i.scdn.co/image/ab67616d00001e02015c484a7aca592df1a77828

当你只想https://i.scdn.co/image/ab67616d00001e02015c484a7aca592df1a77828时

我怀疑localStorage.getItem("currentAlbumCover")正在返回连接值，因此也许值得检查如何将值保存到 localStorage。