0

I am trying to create an "avatar" component using Gatsby with typescript. Thee component is supposed to use a local image. My component looks like

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

And I am calling it with

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

The path to the file is correct, however it's not showing up. What am I doing wrong?

P.S. Is there a way to make the image go through gatsby-image for being optimized?

JakobAttk
  • 113
  • 3
  • 16
  • 1
    Getting local images on gatsby is hard. Im struggling with a lot of gatsby things. You need to use graphQL to load the image into your component using a query, and then use that filename, instead of a hardcoded string. its complicated, have a look at https://www.gatsbyjs.org/docs/working-with-images/ – Ben Butterworth May 23 '20 at 19:01
  • 2
    This might answer your question: https://stackoverflow.com/a/56957020/203130 – coreyward May 23 '20 at 19:46
  • 2
    If you want to process images with Sharp for `gatsby-image`, you'll need to pull your local images into your GraphQL schema first. You'll want to use `gatsby-source-filesystem` for this. As suggested by @BenB, [Working with images in Gatsby](https://www.gatsbyjs.org/docs/working-with-images/) is a good place to start. – Robin Métral May 23 '20 at 20:43
  • I think this is a duplicate of the question linked by @coreyward – Derek Nguyen May 24 '20 at 15:21

0 Answers0