Skip to main content

使用 background-image 或 mask-image 时闪烁

在 Remotion 中不推荐使用以下代码：

🌐 The following code is discouraged in Remotion:

❌ Don't do this
const myMarkup = (
  <div
    style={{
      backgroundImage: `url(${src})`,
    }}
  >
    <p>Hello World</p>
  </div>
);

问题​

🌐 Problem

Remotion 无法知道图片何时加载完成，因为通过 background-image、mask-image 或其他 CSS 属性加载图片时无法确定图片是否加载完成。这将导致 Remotion 在渲染时不会等待图片加载完成，从而引起可见的闪烁。

🌐 Remotion has no way of knowing when the image is finished loading because it is impossible to determine so when loading an image through background-image, mask-image, or other CSS properties. This will lead to Remotion not waiting for the image to be loaded during rendering and cause visible flickers.

解决方案​

🌐 Solution

请改用 <Img> 标签，并将其放在 <AbsoluteFill> 中：

🌐 Use the <Img> tag instead and place it in an <AbsoluteFill>:

✅ Do this
import { AbsoluteFill, Img } from "remotion";

const myMarkup = (
  <AbsoluteFill>
    <AbsoluteFill>
      <Img
        style={{
          width: "100%",
        }}
        src={src}
      />
    </AbsoluteFill>
    <AbsoluteFill>
      <p>Hello World</p>
    </AbsoluteFill>
  </AbsoluteFill>
);

下一个将被放置在图片上方，并且不会闪烁。

🌐 The next will be placed on top of the image and will not flicker.

解决方法​

🌐 Workaround

如果你不能使用 <Img> 标签，例如因为你需要使用 mask-image()，请渲染一个相邻的 <Img> 标签，该标签渲染相同的 src 并将其放置在视口之外：

🌐 If you cannot use an <Img> tag, for example because you need to use mask-image(), render an adjacent <Img> tag that renders the same src and place it outside the viewport:

✅ Do this
import { Img } from "remotion";

const myMarkup = (
  <>
    <Img
      src={src}
      style={{
        opacity: 0,
        position: "absolute",
        left: "-100%",
      }}
    />
    <div
      style={{
        maskImage: `url(${src})`,
      }}
    >
      <p>Hello World</p>
    </div>
  </>
);

隐藏的 <Img> 标签确保图片会完全下载，这允许 background-image 完全渲染。

🌐 The hidden <Img> tag ensures the image will download completely which allows the background-image will fully render.

另请参阅​

🌐 See also

Last updated on