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

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

問題

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

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

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

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

.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へのシンボリックリンクをはっておきます。

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

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

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

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

デロイト トーマツ ウェブサービス株式会社(DWS)

デロイト トーマツ ウェブサービス株式会社はアマゾン ウェブ サービス（AWS）に 専門性や実績を認定された公式パートナーです。