javascript - 反应 img src 在手机上显示损坏的图像，但在 PC 上加载正常

Question

我正在做一个项目，并且正在使用来自 amazon.com 产品的图像 src 链接。当我在我的电脑上使用该项目时（使用开发工具缩小），图像加载没有问题。但是，当我在 safari 或 chrome 中将应用程序加载到手机上时，它会显示损坏的图像？

链接存储在 psql 数据库中并通过product.picture_main对象传递。

const { product } = this.context

return (
  <React.Fragment>
    <section className='ItemPage'>
      <img id="itemImg" src={product.picture_main} alt='' />
      <div className='ItemPage_ItemDetails'>
        <h1 id="itemName">{product.product_name}</h1>
        <h3 id="itemRoast">Roast: {product.product_roast}</h3>
        <h3 id="itemOrigin">Origin: {product.origin}</h3>
        <h4 id="itemDetails">{product.details}</h4>
        <h3 id="itemPrice">Price: ${product.price}</h3>
        <div className='ItemPage_addButton'>
          <AddToCartButton product={product} />
        </div>
      </div>
    </section>
  </React.Fragment>
);

上面的代码在 chrome 中显示很好，我设置了 200px 的宽度/高度，所以我不知道是什么导致了图像损坏。

标签： javascriptreactjsimagemobilesrc