Using the framer/resources module you can reference any files included in your Framer project from within your code component.

Components can use the url() function to create a URL that will reference any file within your Framer project. This is particularly useful for including images and other media from code.

For Framer Web, only files placed in the ./assets folder of your project will work.


#url(path: string): string

Generates a URL for the path provided that will work regardless of where the component is being used (for example, in the Canvas, Preview or Export).

path: string

A path to a file within the current project relative to the folder root.

returns: string

A full URL to the file including origin.

import * as React from "react"
import { Frame } from "framer"
import { url } from "framer/resource"

export function MyComponent() {
  return (
    <Frame image={url("./assets/test.png")} size={"100%"} />

This URL will change depending on where and when your project is opened so use it directly within your components and avoid storing the result or using it as a value in a custom property control.

// GOOD: Use a relative path. Call url() within component.
const image = "./assets/test.png"

export function MyComponent() {
  return <Frame image={url(image)} size={"100%"} />
// BAD: Avoid this. The returned url may change over time.
const image = url("./assets/test.png")

export function MyComponent() {
  return <Frame image={image} size={"100%"} />