StorybookでCSSに画像を指定をしたい時

created at: 2017-08-30 GitHub Edit Page

この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

小ネタ。

CSS での画像指定の仕方がイマイチわからず webpack 上でなんとかするのかと思っていました。

解決法

単純に**「静的ディレクトリから参照してくる」**というのを設定してあげればいいだけの話でした。

指定方法

https://storybook.js.org/configurations/default-config/#image-and-static-file-support

storybook also has a way to mention static directories via the -s option of the start-storybook and build-storybook commands.

-s {static directories}

-sオプションを追加して指定の静的ディレクトリを指定してあげるだけ。ね、簡単でしょ。

`./dist` が output 先だとしている場合

"scripts" {
   "storybook": "start-storybook -p 6006 -s ./dist"
}

こんな感じになります。

動かしてみる

yarn storybook

動かしてみて、以下ルートのディレクトリから画像を取得すると想定します。

dist/
└── img/
    └── ic-arrow_right.png  < これ

コード例

import * as React from 'react';

export class Hogehoge extends React.Component {
  render() {
    return <div className="hogehoge">画像が見れる</div>;
  }
}

.hogehoge {
  width: 100%;
  height: 30px;
  background-image: url('/img/ic-arrow_back.png'); /* 画像指定 */
}

結果

ちなみに <img> の src 読み込みでも同じこと出来ます。

import * as React from 'react';

export class Hogehoge extends React.Component {
  render() {
    return (
      <div className="hogehoge">
        <img src="/img/ic-arrow_back.png" />
        画像が見れる
      </div>
    );
  }
}

参考 URL

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。