Загрузка локального изображения с помощью Гэтсби

Я пытаюсь создать компонент «аватар», используя Gatsby с машинописным текстом. Этот компонент должен использовать локальный образ. Мой компонент выглядит как

const avatar: React.FC<Props> = ({imageUrl, title}: Props) => (
    <div className="avatar" title={title} style={{backgroundImage: `url(${imageUrl})`}} />
);

И я звоню с

<Avatar title={"Avatar"} imageUrl={"../avatar/elements.png"} />

Путь к файлу правильный, но он не отображается. Что я делаю неправильно?

P.S. Есть ли способ заставить изображение пройти через gatsby-image для оптимизации?