Skip to main content

<Img>

<Img> 标签可以像常规的 <img> HTML 标签一样使用。

如果使用 <Img>,Remotion 将确保在渲染帧之前加载图像。这样,您可以避免在渲染过程中图像未立即加载时出现闪烁。

API

src

将图像放入 public/ 文件夹 并使用 staticFile() 来引用它。

tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img src={staticFile("hi.png")} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img src={staticFile("hi.png")} />
</AbsoluteFill>
);
};

您也可以加载远程图像:

tsx
import { AbsoluteFill, Img } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img src={"https://picsum.photos/200/300"} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Img } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img src={"https://picsum.photos/200/300"} />
</AbsoluteFill>
);
};

onError

为了以一种弹性的方式使用 <Img> 标签,处理图像无法加载时发生的错误:

tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img
src={staticFile("hi.png")}
onError={(event) => {
// Handle image loading error here
}}
/>
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Img
src={staticFile("hi.png")}
onError={(event) => {
// Handle image loading error here
}}
/>
</AbsoluteFill>
);
};

如果发生错误,组件必须被卸载或者 src 必须被替换,否则渲染将超时。

v3.3.82 开始,在抛出 onError 之前,图像加载将首先进行重试。

maxRetriesv3.3.82

如果图像加载失败,将从 v3.3.82 开始进行重试。默认值为 2
采用指数退避,第一次和第二次尝试之间有 1000ms 的延迟,然后是 2000ms,然后是 4000ms 等等。

pauseWhenLoadingv4.0.111

可选

如果设置为 true,当图像正在加载时暂停播放器。参见:缓冲状态

delayRenderTimeoutInMillisecondsv4.0.140

自定义此组件调用的 delayRender()超时

delayRenderRetriesv4.0.140

自定义此组件调用的 delayRender()重试次数
优先考虑 maxRetries 属性。

其他属性

Remotion 继承了常规 <img> 标签的属性,例如 style

GIFs

不要为 GIF 使用 <Img> 标签,而是使用 @remotion/gif

错误行为

从 v4.0.0 开始:如果图片加载失败且没有重试次数了,那么将调用 cancelRender 来抛出错误,除非您使用 onError() 处理错误。

从 v3.3.82 开始:如果图片加载失败,将会重试最多两次。

在早期版本中,加载图片失败会导致控制台中出现错误消息,并最终超时。

限制

  • Chrome 可以显示的最大分辨率为 2^29 像素(539 百万像素)[来源]。Remotion 继承了这一限制。

另请参阅