尝试在react中获取图像的src路径

Question

我在使用 React 和 graphQL 获取图形 CMS 的图像 src 路径时遇到问题。问题是路径总是返回 null。我确信这个问题已经被问过很多次了，但为了让我学习，我只需要看看我做错了什么。

我在 graphQL 中的查询是这样的：

query {
products {
  id
  name
  price
  description
  createdAt
  image {
    id
    url
  }
}

}

我总是得到所有其他信息，但不是图像 src （返回 null）。

我的代码如下：

import React from 'react';

const Product = (props) => {
  return (
      <div className="col-sm-4">
          <div className="card" style={{width: "18rem"}}>
            <img src={props.product.image.url} className="card-img-top" alt={props.product.name}/>
            <div className="card-body">
              <h5 className="card-title">{props.product.name}</h5>
              <p className="card-title">$ {props.product.price}</p>
              <p className="card-title">{props.product.description}</p>
              <button className="btn btn-primary" onClick={() => props.addItem(props.product)}>Buy now</button>
            </div>
          </div>
      </div>
  );
}
export default Product;

任何帮助将非常感激。

Answer 1

Marko Savic 是对的，它返回 null

答案：在 GraphCMS 中，您必须确保发布“内容”和“资产”

GraphCMS 中已发布的资产