Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
MusicKit on the Web makes it easy to add images for content from the Apple Music Catalog, for example album covers or playlist art.
The Apple Music API responses will often contain Artwork
Objects, which can be used to render these images in your app. There are also various values related to the image, such as colors pulled algorithmically from the image contents that can be used for content-specific designs in your app.
Quick Links
Artwork
objects are found on responses from the Apple Music API, usually under the attributes.artwork
property for a resource.
Here is an example of the Artwork
object from an Apple Music API response:
See: Reference : Web Components : Artwork
The <apple-music-artwork>
component will handle the width and height replacement, set a background color to show while artwork is loading, and supply different image sources for different device pixel ratios. Your app just needs to determine the desired display width, and configure the component appropriately.
Example
In the example below, the <apple-music-artwork>
component uses the above example Artwork
object from the Apple Music API. The width
attribute is setting the desired display width, which the web component uses to create a <picture>
tag with the various dimensions needed to support modern Retina displays seamlessly.
You can also provide just the URL property as the source, which will result in a generic background color, and requires passing the width
attribute still to determine the display dimensions.
Example of the rendered artwork component:
The formatArtworkURL
method takes an Artwork
object, and an optional height and width. It returns a URL string that can be used as an image source.
If the width
or height
arguments are not passed, this method will use the maximum values, which come from the Artwork
object itself.