Image | Webflow Developer Documentation

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 // Prop value
9 PropType.Image

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).

Examples

Direct mapping

Define an Image property in your Webflow component, that directly maps to an image property in your React component.

MyComponent.webflow.tsx

1 import { props, PropType, PropValues } from "@webflow/data-types";
2 import { declareComponent } from "@webflow/react";
3 import React from "react";
4 import { MyComponent, MyComponentProps } from "./MyComponent";
5 
6 // Remove href and target from the props to prevent conflicts
7 type WebflowMyComponentProps = {
8 image: PropValues[PropType.Image];
9 } & Omit<MyComponentProps, "src" | "alt">; // Remove buttonText from the props
10 
11 // Wrapper that destructures the object returned from `props.Image` and passes the src and alt to the image component as expected.
12 const WebflowMyComponent = ({
13 image: { src, alt },
14 ...props
15 }: WebflowMyComponentProps) => {
16 return (
17     <MyComponent src={src} alt={alt} {...props} />
18 );
19 };
20 
21 // Component declaration for Webflow
22 export default declareComponent(WebflowMyComponent, {
23 name: "MyComponent",
24 props: {
25     image: props.Image({ name: "Image" }),
26 },
27 });

Prop mapping

This example shows how to define an Image property in your Webflow component, with a wrapper to map the image property to an src and alt property in your React component.

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

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.

PropType.Image

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

Properties

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

Webflow properties panel

Example

MyComponent.tsx

1 import React from "react";
2 import "../styles/globals.css";
3 
4 export interface MyComponentProps {
5     src?: string;
6     alt?: string;
7 }
8 
9 export const MyComponent = ({ src, alt }: MyComponentProps) => {
10 if (!src) return null;
11 
12 return (
13     <div className="image-container">
14     <img 
15         src={src} 
16         alt={alt || ""} 
17         className="component-image"
18     />
19     </div>
20 );
21 }

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