Edit Page

#Assets

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.


#Functions

#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 path to a file within the current project relative to the folder root.

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

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