To use an image your Framer X code, you'll need to reference a URL where that image lives. That URL might be on the web, or it might be a local URL, as shown in the sections below.

Once you have the URL, you can use it as the background property of a Frame as shown below. You can also create your image in the same way you would in regular HTML–by adding the URL of your image as the src property of an <img/>  tag, or as the backgroundImage property of any tag's style attribute.

Examples

<Frame background={{ src: "http://www.my-website.com/my-image.jpg" }}/>
<img src="http://www.my-website.com/my-image.jpg"/>
<div style={{backgroundImage: "http://www.my-website.com/my-image.jpg"}}/>


If your image isn't already online, you can still use it in your Framer X code component. There are two ways of using local images: through an image property control or through a local URL.

Image Property Control

If your component uses an image that may be different for each instance of your component, then the best solution is to add a PropertyControl to the component itself. The property control will allow you (and any other designer using your component) to add an image to a component instance right from the canvas, and the local URL of this image will be available to use in your component.

In your code component:

  1. At the top of your component file, add PropertyControls  and ControlType to your imports from the framer library.
  2. Inside of your component's class, add your property control as shown below.
  3. In your code, use the new prop as the URL for your image.

Example:

import { Frame, addPropertyControls, ControlType } from "framer"

type Props = {
  image: string
}

export class MyComponent extends React.Component<Props> {
  static propertyControls: PropertyControls = {
   heroImage: {
      type: ControlType.Image,
      title: "Image"
    }
  }
 
  render() {
    return <Frame background={{ src: this.props.heroImage }}/>
  }
}


Or, if you're using Framer's Beta API:

  1. At the top of your component file, add addPropertyControls  and ControlType  to your imports from the framer  library.
  2. At the bottom of your component file, use the addPropertyControls  function to add an image property control to your component.
  3. In your code, use the new prop as the URL for your image.

Example (Beta):

import { Frame, addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <Frame background={{ src: props.heroImage }}/>
}

addPropertyControls(MyComponent, {
  heroImage: {
    type: ControlType.Image,
    title: "Image"
  }
})

Local File URL

If a property control won't work for your component, you can use local files instead. See this article to learn how to use images from a local folder instead.

Did this answer your question?