Permalink
Switch branches/tags
3407-repro 3972-options-knob-on-next 4848-new-example-format add-navbar add-polymer3-support add-react-error-overlay add-typings addon-api-concept addon-knob-vue-decoratorless addon-readme addon-resources core/remove-basic-config dd/babel-plugin-react-docgen-2 dependabot/npm_and_yarn/docs/gatsby-plugin-sharp-2.0.15 dependabot/npm_and_yarn/react-native-modal-datetime-picker-6.0.0 docs-v2-babel docs-v2-highlights docs-v2-monaco docs-v2 docs-v2.1 docs/add-versions-json docusaurus feature/add-navbar-refactor feature/add-navbar feature/custom-react-scripts fix/husky-deprecation fix/react-scripts-latest-fixture issue-3972-options-knob knobs-objects knobs/v2 master ndelange/hoisting-rn ndelangen/RN-fixattempt1 ndelangen/RN-fixattempt2 ndelangen/RN-fixattempt3 ndelangen/RN-fixattempt4 ndelangen/RN-fixattempt5 ndelangen/config-refactor ndelangen/docs-in-official ndelangen/hoisting-rn-attempt1 ndelangen/new-layoutsystem ndelangen/nicer-official-demo ndelangen/reactnext ndelangen/replace-html-webpack-plugin-v2 ndelangen/replace-html-webpack-plugin ndelangen/revert-tgz-file-dependencies ndelangen/temp2 new-docs next ng-dynamic-template oblador/fix-metro-flags-rn-57 on-device-addons on-device-ui-all-prs patch-1 patch-2 poc/addon-editor poc/liveedit-addon poc/liveedit-in-storysource-old poc/liveedit-in-storysource pr/JalilArfaoui/3909 pr/hipstersmoothie/4704 pr/kkemple/4482 pr/maacky/4856 presets/default-webpack react-native-on-device react-native/use-core-for-server redux-ui refactoring/remove-mantra-ui-overhaul-routing refactoring/remove-mantra-ui-overhaul refactoring/remove-mantra release/3.3 release/3.4 release/4.0 release/4.1-merged release/4.1 repro-instruction-update rn-tab-open shilman/angular-cli-example shilman/remove-withevents shilman/3.2.12-release snyk-fix-1n1s5x snyk-fix-iu4xwt snyk-fix-m3aahq snyk-fix-ncwvxj snyk-fix-pek1pb snyk-fix-q1x0k4 snyk-fix-rum9x7 snyk-fix-wmry50 storysource-with-deps tech/emotion10 tech/overhaul-ui-addon-notes-ts tech/overhaul-ui-store tech/overhaul-ui tech/try-github-workflos tmeasday/add-refs-to-stories tmeasday/check-react-access-3.4 tmeasday/embed-preview-context try-to-fix-master ts-migration/channels
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (68 sloc) 2.62 KB
id title
serving-static-files
Serving Static Files

It's often useful to load static files like images and videos when creating components and stories.

Storybook provides two ways to do that.

1. Via Imports

You can import any media assets by simply importing (or requiring) them as shown below.

import React from 'react';
import { storiesOf } from '@storybook/react';

import imageFile from './static/image.png';

const image = {
  src: imageFile,
  alt: 'my image',
};

storiesOf('<img />', module)
  .add('with an image', () => (
    <img src={image.src} alt={image.alt} />
  ));

This is enabled with our default config. But, if you are using a custom Webpack config, you need to add the file-loader into your custom Webpack config.

2. Via a Directory

You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.

See the following npm script on how to use it:

{
  "scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

Here ./public is our static directory. Now you can use static files in the public directory in your components or stories like this.

import React from 'react';
import { storiesOf } from '@storybook/react';

const imageAlt = 'my image';

// assume image.png is located in the "public" directory.
storiesOf('<img />', module)
  .add('with a image', () => (
    <img src="/image.png" alt={imageAlt} />
  ));

You can also pass a list of directories separated by commas without spaces instead of a single directory.

{
  "scripts": {
    "start-storybook": "start-storybook -s ./public,./static -p 9001"
  }
}

3. Via a CDN

Upload your files to an online CDN and just reference them. In this example we're using a placeholder image service.

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('<img />', module)
  .add('with a image', () => (
    <img src="https://placehold.it/350x150" alt="My CDN placeholder" />
  ));

Absolute versus relative paths

Sometimes, you may want to deploy your storybook into a subpath, like https://example.com/storybook.

In this case, you need to have all your images and media files with relative paths. Otherwise, Storybook cannot locate those files.

If you load static content via importing, this is automatic and you do not have to do anything.

If you are using a static directory, then you need to use relative paths to load images.