reactjs - 使用 Gatsby 加载本地图像

Question

我正在尝试使用带有打字稿的 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"} />

该文件的路径是正确的，但它没有显示出来。我究竟做错了什么？

PS 有没有办法让图像通过 gatsby-image 进行优化？