# How to Add Image in Framer

> To add an image in Framer, open your project, access the Insert panel, select Media under the Element section, and choose Image. Drag the image onto your canvas, open the Fill menu, and either choose an image from your files, browse online sources, or drag an image directly into the field.

Canonical: https://livedemo.ai/tutorials/how-to-add-image-in-framer/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e0bd673bd5aa8e5fe7c/preview?step=1

## Steps

1. Open your Frame project.
2. Open the 'Insert' panel to access Framer's powerful design components.
3. Go to the 'Element' section and select 'Media'.
4. Navigate to the 'Media' category and select 'Image'.
5. Drag the image element onto your canvas and edit the image immediately.
6. Go to the 'Fill' menu to add an image.
7. Choose an image from your files, browse online sources, or drag an image directly into the field.
8. That's it! You've successfully added an image in Framer.