Гэтсби. js проблема с источником изображения

Question

Я только начал изучать Гэтсби. js с помощью Styled Components, и проблема в том, что браузер не показывает изображения. store.js находится в папке pages, а изображения находятся в папке images. Оба в папке src. Единственное, что появляется, это значение атрибута alt.

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

Кто-нибудь знает, что не так?

Answer 1

Вы должны поместить папку images в папку static/.

Вот что документация Gatsby говорит о папке static/:

Вы можете создать папку с именем static в root вашего проекта. Каждый файл, который вы поместите в эту папку, будет скопирован в папку public. Например, если вы добавите файл с именем sun.jpg в папку stati c, он будет скопирован в public/sun.jpg

Позже ссылки на изображения из веб-каталога root, например, src={`/images/${product.sku}.jpg`}