Remotion Best Practices 图像

# 在 Remotion 中使用图像 ## `` 组件 始终使用 `remotion` 提供的 `` 组件来显示图像： tsx import { Img, staticFile } from "remotion"; export const MyComposition = () => { return ; }; ## 重要限制 **你必须使用 `remotion` 提供的 `` 组件。** 不要使用： - 原生 HTML `` 元素 - Next.js `` 组件 - CSS `background-image` `` 组件可确保图像在渲染前完全加载，从而防止视频导出过程中出现闪烁和空白帧。 ## 使用 staticFile() 引用本地图像 将图像放置在 `public/` 文件夹中，并使用 `staticFile()` 进行引用： my-video/ ├─ public/ │ ├─ logo.png │ ├─ avatar.jpg │ └─ icon.svg ├─ src/ ├─ package.json tsx import { Img, staticFile } from "remotion"; ## 远程图像 远程 URL 可以直接使用，无需 `staticFile()`： tsx 请确保远程图像已启用 CORS。 对于动画 GIF，请改用 `@remotion/gif` 中的 `` 组件。 ## 大小与定位 使用 `style` 属性来控制大小和位置： tsx ## 动态图像路径 使用模板字符串进行动态文件引用： tsx import { Img, staticFile, useCurrentFrame } from "remotion"; const frame = useCurrentFrame(); // 图像序列 // 基于 props 选择 // 条件渲染图像 此模式适用于： - 图像序列（逐帧动画） - 用户特定的头像或个人资料图片 - 基于主题的图标 - 依赖状态的图形 ## 获取图像尺寸 使用 `getImageDimensions()` 获取图像的尺寸： tsx import { getImageDimensions, staticFile } from "remotion"; const { width, height } = await getImageDimensions(staticFile("photo.png")); 这对于计算宽高比或调整合成大小非常有用： tsx import { getImageDimensions, staticFile, CalculateMetadataFunction } from "remotion"; const calculateMetadata: CalculateMetadataFunction = async () => { const { width, height }