Laravel11とInertia.js、ReactでStorybookから`public`にある画像を読み込む

はじめに

こんにちは、エンジニアのkeitaMaxです。

Laravel11とInertia.js、Reactを使用して開発している時、
Storybookからpublicにある画像を読み込むようする方法を備忘録として書きます。

内容

.storybook.tsファイルに以下を追加するだけです。

.storybook.ts

import type { StorybookConfig } from "@storybook/react-vite"

const config: StorybookConfig = {
    stories: [
        "../resources/**/*.stories.@(js|jsx|mjs|ts|tsx)",
        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    ],
    addons: [
        "@storybook/addon-onboarding",
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@chromatic-com/storybook",
        "@storybook/addon-interactions",
    ],
    framework: {
        name: "@storybook/react-vite",
        options: {},
    },
    staticDirs: ["../public"], // 追加
}
export default config

以下のようにコンポーネントで画像を表示できるようにして、Storybookを立ち上げると画像が表示されています。

<img
 src="/img/test.svg"
/>

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考