React中JS设置图片宽度，本地正常部署后img.width为0

核心问题是图片加载的异步性：本地环境下图片大概率已被浏览器缓存，代码执行时图片几乎瞬间加载完成，能正常获取width/naturalWidth；但部署后图片需要从远程服务器加载，代码在图片还没加载完成时就去读取宽度，自然拿到0。

解决思路：等图片加载完成后再获取宽度 #

在React中，你需要利用组件的状态管理，等待图片加载完成后再计算并应用宽度。以下是两种可行的实现方式：

方式1：使用img元素的onLoad事件

直接在渲染的<img>标签上监听加载完成事件，加载完成后获取真实宽度并更新样式：

import { useState } from 'react';

function ImageWithDynamicWidth() {
  const [imgWidth, setImgWidth] = useState(null);
  const imageUrl = "image_url";

  const handleImageLoad = (e) => {
    // 图片加载完成后获取原始宽度
    const naturalWidth = e.target.naturalWidth;
    const calculatedWidth = (naturalWidth * 2.54) / 30;
    setImgWidth(`${calculatedWidth}mm`);
  };

  return (
    <img 
      src={imageUrl} 
      style={{ width: imgWidth || 'auto' }} 
      onLoad={handleImageLoad}
      alt="图片描述"
    />
  );
}

方式2：用useEffect预加载图片

如果需要在渲染前就计算好宽度，可以用useEffect配合Promise预加载图片：

import { useState, useEffect } from 'react';

function ImageWithDynamicWidth() {
  const [imgWidth, setImgWidth] = useState(null);
  const imageUrl = "image_url";

  useEffect(() => {
    const loadImage = async () => {
      const img = new Image();
      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
        img.src = imageUrl;
      });
      // 图片加载完成后计算宽度
      const calculatedWidth = (img.naturalWidth * 2.54) / 30;
      setImgWidth(`${calculatedWidth}mm`);
    };

    loadImage();
  }, [imageUrl]);

  return imgWidth ? (
    <img src={imageUrl} style={{ width: imgWidth }} alt="图片描述" />
  ) : (
    // 加载中的占位元素
    <div style={{ width: '100%', height: '200px', backgroundColor: '#f0f0f0' }}>加载中...</div>
  );
}

额外注意事项 #

• 别直接同步创建Image实例后立即读取宽度，网络请求是异步的，此时图片还没加载完。
• 可以添加错误处理（比如onerror事件），防止图片加载失败导致状态一直不更新。
• 浏览器会缓存已加载的图片，不会重复发起请求，性能不受影响。

内容的提问来源于stack exchange，提问作者Bharath