Assets

Storyblok includes a digital asset management system for asset management and delivery. Editors can upload assets in their space’s Asset Library.

For more information on uploading and managing individual assets, see the Asset Library documentation.

Private assets

In the Asset Library, the Private Asset toggle will mark an asset as private and allow access only with an access token, which can be generated in Settings > Asset Tokens.

Private assets can be resolved using the assets endpoint of the Content Delivery API. Find a JavaScript example below.

import { apiPlugin, storyblokInit } from '@storyblok/js';

const { storyblokApi } = storyblokInit({
  accessToken: SPACE_TOKEN,
  use: [apiPlugin],
});

const getSignedUrl = async (filename) => {
  const response = await storyblokApi.get('cdn/assets/me', {
    filename: filename,
    token: ASSET_TOKEN,
  });

  return response.data.asset.signed_url;
};

const assetUrl = await getSignedUrl(
'https://a.storyblok.com/f/184738/2560x1946/d20c274998/earth.jpg'
);

document.querySelector('#app').innerHTML = `
  <img src="${assetUrl}" width="200">
`;

Private assets can also be manipulated using the Image Service. Learn more in the Image Service API Reference.

Asset MIME types

The multi-asset field allows the following MIME types:

• Image: image/x—png, image/png, image/gif, image/jpeg, image/svg+xml, image/webp
• Video: video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm
• Audio: audio/*
• Text: application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document

Asset CDN

Storyblok delivers all assets via an AWS CloudFront CDN. Most assets will be served once from the origin service and then subsequently from the CDN, ensuring minimal latency.

Image Service

On top of the CDN, Storyblok also provides an image service to modify images programmatically. To learn how to use the image service, see the Image Service API Reference.

Regional domains

Images are served on different domains depending on their space's region.

Ensure your app references the correct domain when handling images.

Related resources