<Img>
<Img>
标签可以像常规的 <img>
HTML 标签一样使用。
如果使用 <Img>
,Remotion 将确保在渲染帧之前加载图像。这样,您可以避免在渲染过程中图像未立即加载时出现闪烁。
API
src
将图像放入 public/
文件夹 并使用 staticFile()
来引用它。
tsx
import {AbsoluteFill ,Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return (<AbsoluteFill ><Img src ={staticFile ("hi.png")} /></AbsoluteFill >);};
tsx
import {AbsoluteFill ,Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return (<AbsoluteFill ><Img src ={staticFile ("hi.png")} /></AbsoluteFill >);};
您也可以加载远程图像:
tsx
import {AbsoluteFill ,Img } from "remotion";export constMyComp :React .FC = () => {return (<AbsoluteFill ><Img src ={"https://picsum.photos/200/300"} /></AbsoluteFill >);};
tsx
import {AbsoluteFill ,Img } from "remotion";export constMyComp :React .FC = () => {return (<AbsoluteFill ><Img src ={"https://picsum.photos/200/300"} /></AbsoluteFill >);};
onError
为了以一种弹性的方式使用 <Img>
标签,处理图像无法加载时发生的错误:
tsx
import {AbsoluteFill ,Img ,staticFile } from "remotion";export constMyComp :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 constMyComp :React .FC = () => {return (<AbsoluteFill ><Img src ={staticFile ("hi.png")}onError ={(event ) => {// Handle image loading error here}}/></AbsoluteFill >);};
如果发生错误,组件必须被卸载或者 src
必须被替换,否则渲染将超时。
从 v3.3.82
开始,在抛出 onError
之前,图像加载将首先进行重试。
maxRetries
v3.3.82
如果图像加载失败,将从 v3.3.82
开始进行重试。默认值为 2
。
采用指数退避,第一次和第二次尝试之间有 1000ms 的延迟,然后是 2000ms,然后是 4000ms 等等。
pauseWhenLoading
v4.0.111
可选
如果设置为 true
,当图像正在加载时暂停播放器。参见:缓冲状态。
delayRenderTimeoutInMilliseconds
v4.0.140
自定义此组件调用的 delayRender()
的超时。
delayRenderRetries
v4.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 继承了这一限制。