Image

Add an Image property to your component so designers can select images from their Webflow asset library.

Syntax

1
// Prop definition
2
props.Image({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
})
7
8
// Props returned to the React component
9
{
10
    src: string;
11
    alt?: string;
12
}

Prop definition

Define the Image prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

1
props.Image({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
})

Properties

• name: The name for the property.
• group: The group for this property (optional).
• tooltip: The tooltip for this property (optional).

Prop value

The Image prop provides both the image URL and alt text to your React component, making it easy to display dynamic images with proper accessibility.

1
{
2
    src: string;
3
    alt?: string;
4
}

Properties returned to the React component

• src: The source URL of the image.
• alt: The alt text for the image (optional).

Webflow properties panel

Examples

1
import { declareComponent } from '@webflow/react';    
2
import { props } from '@webflow/data-types';
3
import { Hero } from "./Hero";
4
// import "../styles/globals.css";
5
6
export default declareComponent(Hero, {
7
    name: "Hero",
8
    description: "A Hero component with an Image property",
9
    props: {
10
        image: props.Image({
11
            name: "Hero Image",
12
            group: "Content"
13
        })
14
    }
15
});

When to use

Use an Image prop when you want designers to:

• Select images from their asset library
• Change images without touching code
• Set alt text for accessibility

Best practices

• Handle missing images
• Use alt text for accessibility
• Consider responsive design needs