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.