Code Component
Framer X

Ship a code component that points to a local resource (e.g. an image)

HT @onnlucky. Context in this tweet

Sometimes we want to publish a code component that includes some resources, such as images.

We can do it like so:

  1. Put the files into container/ folder of the Framer X project, i.e. the folder we can open with “File -> Show Project Folder”. The files can be inside a sub-folder too, such as container/images/
  2. import { url } from 'framer/resource
  3. Get the url via url("relative/path"). E.g.:
<img src={url('image.png')} />


PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!

© 2021 jimu Labs, Inc.