Nuxt.jsアプリのStorybookで画像を読み込む

Nuxt.jsアプリケーションのStorybookで画像を読み込む小ネタを紹介します。

問題

Storybookで静的ファイルを読み込むには、-sオプションを使用します。

Nuxt.jsだとassets配下に静的ファイルを置くと思いますが、以下のようにすると、Storybookでassets配下がホストされるようになります。

1
2
3
4
5
{
"scripts": {
"start-storybook": "start-storybook -s ./assets -p 6006"
}
}

ただし、Nuxt.js内で、例えば以下のように画像を読み込んでいる場合、Storybook上で表示されません。

1
2
3
.background {
background: url('~/assets/images/sample.png') no-repeat;
}

これは、ビルドされたアプリケーションではhttp://localhost:3000/assets/images/sample.pngから画像を読み込もうとしますが、Storybookでは、http://localhost:3000/images/sample.pngで画像をホストしているためです。

これをresolve.aliasに手を加えず、スマートに解決できないかと考えました。

解決法

解決するには、以下のようにします(といっても簡単ですが…)。

まずassets-linkというディレクトリにassetsへのシンボリックリンクをはっておきます。

1
2
mkdir assets-link
ln -s ../assets assets-link/assets

次に、Storybookの-sにわたす値をassets-linkに変更します。

1
2
3
4
5
{
"scripts": {
"start-storybook": "start-storybook -s ./assets-link -p 6006"
}
}

これにより、Storybookでも、http://localhost:3000/assets/images/sample.pngで画像をホストすることができ、アプリケーションにも手を加える必要がなくなりました(´ω` )

このエントリーをはてなブックマークに追加