Javascript Gatsby.js图像源问题

我刚开始学习使用样式化组件的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

类存储扩展了React.Component{
价格{
退货（价格*0.01）。toFixed（2）
}
render（）{
返回(
{products.map（product=>{
返回(
{product.name}
{this.formatPrice（product.price）}

)
})}
)
}
}
导出默认存储

---

有人知道怎么回事吗？

您必须将

图像

文件夹放入

静态

文件夹

下面是盖茨比文档中关于

static/

文件夹的内容：

您可以在项目根目录下创建名为

static

的文件夹。您放入该文件夹的每个文件都将复制到

public

文件夹中。例如，如果将名为

sun.jpg

的文件添加到静态文件夹中，它将被复制到

public/sun.jpg

---

稍后参考web根目录中的图像，例如，

src={`/images/${product.sku}.jpg`}

好的，我是按照这些步骤做的，所以我在src/folder中创建了static/folder并设置了目录“./static/example.jpg”但是它仍然不起作用

您可以在项目的根目录下创建一个名为static的文件夹

：在根目录中创建它，而不是在src中。