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.