Chapter 212: <Img>

Core Idea

The <Img> tag can be used like a regular <img> HTML tag.

Key Concepts

• API
• src
• effects?<AvailableFrom v="4.0.469" />
• cropLeft?<AvailableFrom v="4.0.500" />
• cropRight?<AvailableFrom v="4.0.500" />
• cropTop?<AvailableFrom v="4.0.500" />
• cropBottom?<AvailableFrom v="4.0.500" />
• onError

Code Examples

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={staticFile('hi.png')} />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for <Img> from the official docs.

Key Takeaways

1. Understand api when working with <Img>.
2. Understand src when working with <Img>.
3. Understand effects?<availablefrom v="4.0.469" /> when working with <Img>.
4. Understand cropleft?<availablefrom v="4.0.500" /> when working with <Img>.
5. Understand cropright?<availablefrom v="4.0.500" /> when working with <Img>.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.