javascript remotion/reactjs不渲染图像

u0njafvf  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(208)

我使用reactjs的remotion库来创建视频内容。我已经遵循了如何导入资产以及使用它们的文档,但由于一些奇怪的原因,图像和css仍然不正确。working.as下面突出显示的文档指示创建一个公共文件夹来添加将通过staticFile方法使用的资产。
搬迁文件

"to import assets in Remotion, create a public/ folder in your project and use staticFile() to import it."

my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Video.tsx
│  ├─ index.tsx
├─ package.json
--------
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

这是我的文件,它由我的资产组成,包括图像和使用staticFile()方法处理图像的组件。
我的搬迁计划

TheMachineAd/
├─ node_modules/
├─ public/
│  ├─ Marcus_Miller_The_Renaissance_Tour.jpg
├─ src/
│  ├─ TheMachine.tsx
│  ├─ Video.tsx
│  ├─ index.tsx
├─ package.json

艺术家图像组件

import React from "react";
import { Img, staticFile, useCurrentFrame, AbsoluteFill } from "remotion";

export const Artist_pic_1: React.FC = () => {
    const frame = useCurrentFrame();

    return (
        <AbsoluteFill>
           
            <Img style={{
                position: "absolute",
                top: "303px",
                right: "419px",
                width: "450px", 
                height: "auto"
            }}
            src={staticFile("Marcus_Miller_The_Renaissance_Tour")} />;

        </AbsoluteFill>
    );
};

主成分渲染图像

import { AbsoluteFill, Sequence, useCurrentFrame } from 'remotion';
import {useVideoConfig} from "remotion";
import { Text_box_1 } from './TheMachine/text-box-1';
import { Artist_pic_1 } from "./TheMachine/artist_pic_1";
import React from 'react';

export const TheMachine: React.FC = () => {
    const frame = useCurrentFrame();
    const {fps, durationInFrames, width, height} = useVideoConfig();

    return (
        <AbsoluteFill style={{backgroundColor: 'aqua'}}>
            <AbsoluteFill>
                <div
                    style={{
                        flex: 1,
                        textAlign: "center",
                        fontSize: "7em",
                        color: "white",
                        }}
                >
                    The current frame is {frame}.
                    This {width}px x {height}px video is {durationInFrames / fps} seconds long.
                </div>
            </AbsoluteFill>
            <AbsoluteFill>
                <Sequence from={20}>
                     <Text_box_1 /> 
                </Sequence>
            </AbsoluteFill>
                <Sequence from={50}>
                    <Artist_pic_1 />
                </Sequence>
        </AbsoluteFill>
    );
};
pbpqsu0x

pbpqsu0x1#

将镜像放入public/文件夹,使用staticFile()引用。

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

也可以加载远程镜像:

import { AbsoluteFill, Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={"https://idkblogs.com/images/logo/logo1_250x150.png"} />
    </AbsoluteFill>
  );
};

相关问题