Usage with Protected Images

Follow these steps to use the Image Service with protected images.

1. Retrieve the signed URL as shown in the assets concept.
2. Encode the signed URL.
3. Prepend it with https://private-img.storyblok.com/ followed by an Image Service operation, e.g. https://private-img.storyblok.com/200x50/filters:grayscale().

Tip

All Image Service operations are supported, but make sure to omit the /m parameter.

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");

const imageServiceOperations = "https://private-img.storyblok.com/200x50/filters:grayscale()/";

const assembledAssetUrl = imageServiceOperations + encodeURIComponent(assetUrl);

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