When you try to use url() from CSS, the path you’re specifying may not always work when you're previewing your prototype. This is partly due to the way Framer X includes extra assets in the previewed version of your prototype.

You can use url(), but you’ll need to use it from the Framer Library to make sure it includes the extra assets correctly.

You can add import {url} from "framer/resource" to a code component, and use url() as you would normally.

  • Open your project folder by selecting File > Show Project Folder. 
  • In the project folder, create a folder named "images".
  • Place your image files in the new folder named "images".
  • Back in your code component, add  url() to your imports from the Framer Library.


An example code component might look something like this:

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

const myImage = url("code/images/Frame.png");

export class Image extends React.Component {
  render() {
    return (
      <div style={style}>
        <img src={myImage} alt="myImage" />
      </div>
    );
  }
}

const style = {
  // Using the background image like this will also work!
  // backgroundImage: url('${myImage}'),
  height: 200,
  width: 200
};
Did this answer your question?