Apple MusicKit JS: Why Do All Images for Music I Purchased Return 404s?

Question

I've made an Apple Music player in my browser using MusicKit JS. I can view and play songs from my library, but the album art for any music I've purchased (rather than uploaded myself from a CD or other media source) returns a 404.

So, for example, I get album art with

music.api.library.songs().then(songs => {
    songs.forEach(song => {
        const albumArt = song.attributes.artwork.url
        document.getElementById('my-example').innerHTML = `<img src="${albumArt} alt="album art" />`
    })
})

But the album art for songs I've purchased returns 404, while the album art for the songs I uploaded myself is fine.

Answer 1

The URLs for album art for purchased music includes '{w}x{h}'. This appears to be the default for width and height parameters. I'm not sure if there are some API params I could pass to address this, but I got around it by calling replace('{w}x{h}', '300x300') on the image src before putting it in the DOM.

Answer 2

MusicKitJs actually has a utility function that formats images for you. From their documentation:

static string formatArtworkURL(Artwork artwork, undefined height, undefined width);

You can use this function on the musicKit instance and pass in your height and width in px. Source: https://developer.apple.com/documentation/musickitjs/musickit/3001508-formatartworkurl