Posted at

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

More than 1 year has passed since last update.

小ネタ。

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先だとしている場合


package.json

"scripts" {

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

こんな感じになります。


動かしてみる

yarn storybook

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

dist/

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


コード例


hoge.tsx

import * as React from 'react';

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



hoge.css

.hogehoge {

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


結果

https://gyazo.com/e8336990759c1b762050251c0c7fe510

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


hoge.tsx

import * as React from 'react';

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


https://gyazo.com/c5174a5a6a99b4d7570ca7c5e8080ecf


参考URL