使用Gatsby加载本地图像

Question

我正在尝试使用带盖脚本的盖茨比创建一个“头像”组件。您组件应该使用本地图像。我的组件看起来像

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进行优化？