Gatsby.js image source issue

Question

I just started learning Gatsby.js with Styled Components and the problem is that the browser doesn't show images. store.js is in pages folder and images are in images folder. Both in src folder. The only thing which appears is the value of alt attribute.

class Store extends React.Component {
  formatPrice(price) {
    return (price * 0.01).toFixed(2)
  }
  render() {
    return (
      <Main>
        <StoreContent>
          {products.map(product => {
            return (
              <Product key={product.key}>
                <img
                  width={100}
                  src={`../images/${product.sku}.jpg`}
                  alt="macbook"
                />
                <h2>{product.name}</h2>
                <p>{this.formatPrice(product.price)}</p>
              </Product>
            )
          })}
        </StoreContent>
      </Main>
    )
  }
}

export default Store

Does anyone know what's wrong?

Answer 1

You have to put the images folder into static/ folder.

Here's what Gatsby documentation says about static/ folder:

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. Eg if you add a file named sun.jpg to the static folder, it'll be copied to public/sun.jpg

Later reference the images from the web root directory, eg src={`/images/${product.sku}.jpg`}