Skip to main content

<Img>

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

🌐 The <Img> tag can be used like a regular <img> HTML tag.

如果你使用 <Img>，Remotion 会确保在渲染帧之前加载图片。这样，如果图片在渲染过程中没有立即加载，你就可以避免闪烁。

🌐 If you use <Img>, Remotion will ensure that the image is loaded before rendering the frame. That way you can avoid flickers if the image does not load immediately during rendering.

应用编程接口​

🌐 API

src​

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

import {AbsoluteFill, Img, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={staticFile('hi.png')} />
    </AbsoluteFill>
  );
};

你也可以加载远程图片：

🌐 You can also load a remote image:

import {AbsoluteFill, Img} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={'https://picsum.photos/200/300'} />
    </AbsoluteFill>
  );
};

onError​

为了以一种健壮的方式使用 <Img> 标签，请处理当图片无法加载时发生的错误：

🌐 To use the <Img> tag in a resilient way, handle the error that occurs when an image can not be loaded:

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必须被替换，否则渲染将超时。

🌐 If an error occurs, the component must be unmounted or the src must be replaced, otherwise the render will time out.

从 v3.3.82 开始，图片加载将在抛出 onError 之前先重试。

🌐 From v3.3.82, the image load will first be retried before onError is thrown.

maxRetriesv3.3.82​

如果图片加载失败，它将从 v3.3.82 重试。默认值是 2。 正在使用指数退避，第一次和第二次尝试之间的延迟为1000毫秒，然后是2000毫秒，再然后是4000毫秒，依此类推。

🌐 If an image fails to load, it will be retried from v3.3.82. The default value is 2.
An exponential backoff is being used, with 1000ms delay between the first and second attempt, then 2000ms, then 4000ms and so on.

pauseWhenLoading?v4.0.111​

如果设置为 true，在图片加载时暂停播放器。参见：缓冲状态。

🌐 If set to true, pause the Player when the image is loading. See: Buffer state.

delayRenderTimeoutInMilliseconds?v4.0.140​

自定义此组件进行的 delayRender() 调用的 超时 设置。

🌐 Customize the timeout of the delayRender() call that this component makes.

delayRenderRetries?v4.0.140​

自定义此组件所进行的 delayRender() 调用的重试次数。 优先使用 maxRetries 属性而不是此属性。

🌐 Customize the number of retries of the delayRender() call that this component makes.
Prefer the maxRetries prop over this.

其他属性​

🌐 Other props

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

🌐 Remotion inherits the props of the regular <img> tag, like for example style.

动图​

🌐 GIFs

不要对 GIF 使用 <Img> 标签，请改用 @remotion/gif。

🌐 Don't use the <Img> tag for GIFs, use @remotion/gif instead.

错误行为​

🌐 Error behavior

从 v4.0.0 开始：如果图片加载失败且没有剩余重试次数，则会调用 cancelRender 抛出错误，除非你使用 onError() 处理该错误。

🌐 From v4.0.0: If the image fails to load and no retries are left, then cancelRender will be called to throw an error, unless you handle the error using onError().

从 v3.3.82 开始：如果图片加载失败，它将最多重试两次。

🌐 From v3.3.82: If an image fails to load, it will be retried up to two times.

在早期版本中，加载图片失败会在控制台中显示错误信息，并最终导致超时。

🌐 In earlier versions, failing to load an image would lead to an error message in the console and an eventual timeout.

限制​

🌐 Restrictions

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

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on