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

Code Component
Updated: 2018-10-23

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')} />

Source Code

Check out the complete source code here