Images and SVG

We recommend creating a folder called /static or /assets and putting any image in that folder. This is optional, you can name the folder as you want.

Terminal.app

mkdir assets

To import files:

templates/main.js

import React from "react";

import background from "../static/background.jpg";
import logo from "../static/logo.svg";

export default function Template({ variables }) {
  return (
    <div style={{ /* ... */ }}>
      <img src={background} style={{ /* ... */ }} />
      <img src={logo} style={{ /* ... */ }} />
    </div>
  )
}

Smart crop

To create smart images that focus on people's faces use use-smartcrop built by us on top of jwagner/smartcrop.js

It's important to use .flyyer-wait CSS class to prevent premature renders, see /docs/advanced/flyyer-wait.