Using images in Code Components

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

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

Using an image hosted online

If you have a URL of a hosted image, you can set 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.

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

Using local images

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

Adding an image with a 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 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.
import { Frame, addPropertyControls, ControlType } from "framer"
export function MyComponent(props) {
return <Frame background={{ src: props.heroImage }}/>
}
addPropertyControls(MyComponent, {
heroImage: {
type: ControlType.Image,
title: "Image"
}
})
COPY

Using an image added to your project folder

If a property control won't work for your component, you can use local files instead. Keep in mind that this approach only works with the desktop app.

To use local images inside of a code component in your Framer desktop project, you’ll need to use a utility function from the Framer Library.

This is partly due to the way Framer includes extra assets in the previewed version of your prototype.

You can follow these steps to get images to work within your code component:

  • Open your project folder by selecting File > Show Project Folder or by using the shortcut + + P.
  • In the main folder where you arrive, create a new folder named "images".
  • Place your image file(s) in the new folder named "images".
  • Go to your code component and add import { url } from "framer/resource" to the top.
  • Utilize url() to point it to the correct image within your "images" folder.

An example code component might look something like this:

import * as React from "react"
import { url } from "framer/resource";
export function Image() {
let image = "./images/myimage.png";
let imagePath = url(image).replace("/preview", "");
return (
<div style={style}>
<img src={imagePath} alt="myImage" />
</div>
)
}
const style = {
// Using the background image like this will also work
// backgroundImage: url('${imagePath}'),
height: 200,
width: 200
};
COPY

The line let imagePath = url(image).replace("/preview", ""); is required if you want to view your image in live preview as well.