Media

To preview images and videos in your blocks, you will need to use files hosted on a remote server. One option is to upload the media to Storyblok and then copy the URL to use in your preview environment. This will ensure that the media is accessible from your app and will allow you to easily manage and update it if necessary. Another option is to use preview images from a free image library like Unsplash.

Example usage

const BlockComponent = () => {
  const { content } = useBlockState();

  return (
    <div>
      <img src={content.image.filename} />
    </div>
  );
};

export default defineBlock({
  component: BlockComponent,
  contentSchema: {
    fields: {
      image: {
        type: "image",
        preview:
          "https://images.unsplash.com/photo-1669962367460-00b711b2e3f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=80",
      },
    },
  },
});

Storyblok Assets

In the assets section, you can upload and manage your assets.