我使用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>
);
};
1条答案
按热度按时间pbpqsu0x1#
将镜像放入public/文件夹,使用staticFile()引用。
也可以加载远程镜像: