图像、字体和资源
组件通常依赖图像、视频、字体和其他资源来按用户期望的方式渲染。在你的 Story 文件中有很多方法可以使用这些资源。
将资源导入到 Stories 中
你可以通过导入(或 require)任何媒体资源来导入它们。它开箱即用地与我们的默认配置一起工作。但是,如果你正在使用自定义 webpack 配置,你需要添加 file loader 来处理所需的文件。
之后,你可以在你的 Stories 中使用任何资源
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
配置元素来指定目录
// 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 中使用它。
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" />,
};
你也可以传递以逗号分隔且不带空格的目录列表,而不是单个目录。
// 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;
甚至可以使用配置对象来定义目录
// 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 并引用它们。在这个例子中,我们正在使用一个占位符图像服务。
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.org.cn/images/placeholders/350x150.png" alt="My CDN placeholder" />
),
};
绝对路径与相对路径
有时,你可能想要将你的 Storybook 部署到子路径中,例如 https://example.com/storybook
。
在这种情况下,你需要让你的所有图像和媒体文件都使用相对路径。否则,浏览器将无法找到这些文件。
如果你通过导入加载静态内容,这是自动的,你无需执行任何操作。
假设你正在与 Storybook 一起在静态目录中提供资源。在这种情况下,你需要使用相对路径来加载图像或使用 base 元素。
在 Stories 中引用字体
在配置 Storybook 从你的静态文件夹提供资源后,你可以在 Storybook 中引用这些资源。例如,你可以引用自定义字体并将它应用到你的 Stories 中。为此,在配置目录(即 .storybook
)中创建一个 preview-head.html
文件,并添加一个 <link />
标签来引用你的字体。
<!--
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>