Javasript 通过带有变量的 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。

Answer 2

尝试在控制台中转储你的变量，看起来你有一个绝对的 URL 被用作相对路径。

如果我的想法是正确的，这将转储：/https: /https://i.scdn.co/image/ab67616d00001e02015c484a7aca592df1a77828

所以currentAlbumCover前面可能有一个“/”。

希望这可以帮助！

Answer 3

我发现了错误。 我从 Spotify starta 获得并以引号结尾的字符串，我没有在控制台中注意到这一点..：这一行修复了它：

currentAlbumCover = localStorage.getItem("currentAlbumCover").replace(/\"/g, '');