Gatsby.js 图像源问题

Question

我刚开始用 Styled Components 学习 Gatsby.js，问题是浏览器不显示图像。 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/文件夹中。

以下是盖茨比的文件说，关于static/文件夹：

您可以在项目的根目录下创建一个名为static的文件夹。 你把该文件夹中的每个文件都将被复制到public文件夹。 例如，如果您将名为sun.jpg的文件添加到静态文件夹，它将被复制到public/sun.jpg

稍后从网络根目录引用图像，例如src={`/images/${product.sku}.jpg`}