圖片、字型和資源

元件通常依賴圖片、影片、字型和其他資源來按照使用者預期的方式呈現。在您的 Story 檔案中有很多方式可以使用這些資源。

將資源匯入 Story

您可以透過匯入（或要求）它們來匯入任何媒體資源。它在我們的預設設定下可以直接使用。但是，如果您使用的是自訂 webpack 設定，您需要新增 file loader 來處理所需的檔案。

之後，您可以在您的 Story 中使用任何資源

MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import imageFile from './static/image.png';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
const image = {
  src: imageFile,
  alt: 'my image',
};
 
export const WithAnImage: Story = {
  render: () => <img src={image.src} alt={image.alt} />,
};

透過 Storybook 設定提供靜態檔案

我們建議透過 Storybook 提供靜態檔案，以確保您的元件始終具有載入所需的資源。我們建議對您的元件經常使用的資源採用此技術，例如標誌、字型和圖示。

在啟動 Storybook 時，設定您的資源所在的目錄（或目錄清單）。使用您主要 Storybook 設定檔（即 .storybook/main.js|ts）中的 staticDirs 設定元素來指定目錄

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  staticDirs: ['../public', '../static'],
};
 
export default config;

這裡 ../public 是您的靜態目錄。現在像這樣在元件或 Story 中使用它。

MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
// Assume image.png is located in the "public" directory.
export const WithAnImage: Story = {
  render: () => <img src="/image.png" alt="my image" />,
};

您也可以傳遞以逗號分隔且不含空格的目錄清單，而不是單一目錄。

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  staticDirs: ['../public', '../static'],
};
 
export default config;

或者甚至可以使用設定物件來定義目錄

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
};
 
export default config;

從 CDN 參考資源

將您的檔案上傳至線上 CDN 並參考它們。在此範例中，我們使用預留位置圖片服務。

MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
export const WithAnImage: Story = {
  render: () => (
    <img src="https://storybook.dev.org.tw/images/placeholders/350x150.png" alt="My CDN placeholder" />
  ),
};

絕對路徑與相對路徑

有時，您可能想要將您的 Storybook 部署到子路徑，例如 https://example.com/storybook。

在這種情況下，您需要使用相對路徑來設定所有圖片和媒體檔案。否則，瀏覽器將無法找到這些檔案。

如果您透過匯入載入靜態內容，這是自動的，您不需要執行任何操作。

假設您正在與 Storybook 一起在靜態目錄中提供資源。在這種情況下，您需要使用相對路徑來載入圖片，或使用 base 元素。

在 Story 中參考字型

在設定 Storybook 從您的靜態資料夾提供資源後，您可以在 Storybook 中參照這些資源。例如，您可以參照並將自訂字型套用至您的 Story。若要執行此操作，請在組態目錄（即 .storybook）內建立一個 preview-head.html 檔案，並新增一個 <link /> 標籤來參照您的字型。

{/* .storybook/preview-head.html */}
 
{/* Pull in static files served from your Static directory or the internet */}
{/* Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory */}
<link rel="preload" href="/fonts/my-font.woff2" />
 
{/* Or you can load custom head-tag JavaScript: */}
 
<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>
  try {
    Typekit.load();
  } catch (e) {}
</script>