Question

我刚开始使用样式化组件学习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/文件夹的Gatsby文档says：

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

以后请参考网络根目录中的图片，例如src={`/images/${product.sku}.jpg`}

Gatsby.js图片来源问题

1 个答案: