72 lines
1.4 KiB
Markdown
72 lines
1.4 KiB
Markdown
## Sizing and positioning
|
|
|
|
Use the `style` prop to control size and position:
|
|
|
|
```tsx
|
|
<Img
|
|
src={staticFile("photo.png")}
|
|
style={{
|
|
width: 500,
|
|
height: 300,
|
|
position: "absolute",
|
|
top: 100,
|
|
left: 50,
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## Dynamic image paths
|
|
|
|
Use template literals for dynamic file references:
|
|
|
|
```tsx
|
|
import { Img, staticFile, useCurrentFrame } from "remotion";
|
|
|
|
const frame = useCurrentFrame();
|
|
|
|
// Image sequence
|
|
<Img src={staticFile(`frames/frame${frame}.png`)} />
|
|
|
|
// Selecting based on props
|
|
<Img src={staticFile(`avatars/${props.userId}.png`)} />
|
|
|
|
// Conditional images
|
|
<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
|
|
```
|
|
|
|
This pattern is useful for:
|
|
|
|
- Image sequences (frame-by-frame animations)
|
|
- User-specific avatars or profile images
|
|
- Theme-based icons
|
|
- State-dependent graphics
|
|
|
|
## Getting image dimensions
|
|
|
|
Use `getImageDimensions()` to get the dimensions of an image:
|
|
|
|
```tsx
|
|
import { getImageDimensions, staticFile } from "remotion";
|
|
|
|
const { width, height } = await getImageDimensions(staticFile("photo.png"));
|
|
```
|
|
|
|
This is useful for calculating aspect ratios or sizing compositions:
|
|
|
|
```tsx
|
|
import {
|
|
getImageDimensions,
|
|
staticFile,
|
|
CalculateMetadataFunction,
|
|
} from "remotion";
|
|
|
|
const calculateMetadata: CalculateMetadataFunction = async () => {
|
|
const { width, height } = await getImageDimensions(staticFile("photo.png"));
|
|
return {
|
|
width,
|
|
height,
|
|
};
|
|
};
|
|
```
|