Django+DRF+React(TS)中Image组件显示1295x0问题求助

核心问题出在React前端，后端Django/DRF的图片服务已经正常（直接访问URL能显示完整尺寸），不需要修改后端。下面是具体解决方法：

1. 修复原生<img>不刷新的问题 #

图片不刷新大多是浏览器缓存了旧资源，或者选中新Product时URL未触发更新。可以给src添加时间戳参数强制刷新：

<img 
  src={`${product.imageUrl}?t=${new Date().getTime()}`} 
  alt={product.name}
/>

2. 解决图片显示1295x0的尺寸异常 #

这个尺寸说明图片容器高度塌陷，或者图片加载时未获取到真实尺寸。可以通过以下方式处理：

• 给图片容器设置最小高度，避免加载时高度为0：

.image-container {
  min-height: 200px;
}

• 用CSS的object-fit属性让图片自适应容器并保持比例：

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 完整显示图片，不裁剪 */
  /* 若需要填满容器可改用object-fit: cover; */
}

• 通过状态管理加载状态，加载完成前显示占位符：

const [isImageLoaded, setIsImageLoaded] = useState(false);

return (
  <div className="image-container">
    {!isImageLoaded && <div className="placeholder">加载中...</div>}
    <img
      src={`${product.imageUrl}?t=${new Date().getTime()}`}
      alt={product.name}
      className="product-image"
      onLoad={() => setIsImageLoaded(true)}
      style={{ display: isImageLoaded ? 'block' : 'none' }}
    />
  </div>
);

3. 适配不同比例的图片（替代React Native Image固定尺寸） #

Web端无需使用React Native的Image组件，用原生img配合CSS即可实现自适应：

• 使用aspect-ratio属性自动匹配图片本身的宽高比：

.product-image {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

• 也可以动态获取图片真实尺寸，计算比例后设置容器样式：

const [aspectRatio, setAspectRatio] = useState(16/9); // 默认比例

return (
  <div 
    className="image-container"
    style={{ aspectRatio }}
  >
    <img
      src={`${product.imageUrl}?t=${new Date().getTime()}`}
      alt={product.name}
      className="product-image"
      onLoad={(e) => {
        const img = e.target as HTMLImageElement;
        setAspectRatio(img.naturalWidth / img.naturalHeight);
      }}
    />
  </div>
);

内容的提问来源于stack exchange，提问作者Muhammed D. Yüksel