反应图像未加载到特定组件上

Question

我已经提供了我的 img 元素 src={obj.url}，当我去查看浏览器的开发工具时，它可以正常工作。该图像具有指定的 url 地址作为图片来源，但该图片并未显示在屏幕上，就好像它是一个断开的链接。此外，相同的链接适用于父组件，并且图片渲染没有问题。我将包括我的两个组件的屏幕截图和代码。 父组件：

当按下“添加到购物车”时，当前商品将被添加到购物车中，并将显示在结账页面上的列表中，这是一个子组件。

结帐页面

这是一个父组件的代码：

function Checkout() {
  let [, , , , item, setItem] = useContext(DataContext);
  console.log(item);
  let itemList = item.map((obj) => {
    return <CheckoutItems img={obj.url} title={obj.name} price={obj.price} />;
  });
  return (
    <div className="checkout">
      <h1>Your items</h1>
      <div className="checkoutItems">{itemList}</div>
    </div>
  );
}

结帐组件代码：

function CheckoutItems({ img, title, price }) {
  return (
    <div className="checkItem">
      <div>
        <img scr={img} />
        <h2>{title}</h2>
      </div>
      <h2>{price}</h2>
    </div>
  );
}