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 继承了这一限制。

另请参阅​