如何在react-konva画布中无需上传直接添加项目本地图片？onload不执行加载失败

核心问题原因 #

img.onload不触发、图片无法显示的本质是两个常见的代码错误叠加：

1. 现代前端构建工具（CRA、Vite等）下，运行时require()返回的对象不是可直接赋值给Image.src的有效图片URL，多数场景下拿到的是带default属性的模块对象，导致图片加载请求根本发不出去。
2. 代码里先给img.src赋值、后绑定onload回调的顺序错误，遇到本地缓存的图片时，赋值瞬间就会完成加载，后绑定的回调无法捕获加载完成事件。

具体修复步骤 #

• 替换资源引入方式：摒弃运行时require，在组件顶部通过ES模块静态导入本地图片，构建工具会自动处理资源返回可直接访问的URL：

  // 组件顶部导入，不要写在逻辑代码块里
  import localImage from '../../../assets/images/71.png';
  

  如果图片放在项目的public静态目录下，可以直接写绝对路径作为图片源，不需要import：img.src = '/images/71.png'
• 调整回调绑定顺序：创建Image实例后，先挂载onload、onerror回调，最后再给img.src赋值，从代码逻辑上避免时序问题导致的回调不触发。
• 用React状态驱动Konva节点渲染，不要手动操作LayerRef添加节点。手动操作ref的方式容易遇到组件未挂载的时机问题，状态驱动的方式会在图片加载完成后自动把Konva.Image节点渲染到画布中，逻辑更可靠。

修正后可直接运行的参考代码 #

import { useEffect, useState, useRef } from 'react';
import { Stage, Layer, Image as KonvaImage } from 'react-konva';
// 顶部静态引入本地图片
import localBgImage from '../../../assets/images/71.png';

export default function CanvasDemo() {
  const [loadedImage, setLoadedImage] = useState(null);
  const [originalSize, setOriginalSize] = useState({ width: 0, height: 0 });
  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
  const stageRef = useRef(null);
  const layerRef = useRef(null);

  useEffect(() => {
    const img = new window.Image();
    // 先绑定加载完成回调
    img.onload = () => {
      const imgW = img.naturalWidth;
      const imgH = img.naturalHeight;
      const scaleTarget = 100;
      const scaleRatio = Math.max(imgW, imgH) / scaleTarget;

      setOriginalSize({ width: imgW, height: imgH });
      setCanvasSize({
        width: imgW / scaleRatio,
        height: imgH / scaleRatio
      });
      setLoadedImage(img);
    };
    // 绑定加载错误回调方便排查路径问题
    img.onerror = (err) => {
      console.error('本地图片加载失败，请检查资源路径配置', err);
    };
    // 最后赋值图片源，保证回调能被触发
    img.src = localBgImage;
  }, []);

  return (
    <Stage
      width={canvasSize.width}
      height={canvasSize.height}
      ref={stageRef}
      id="certificate_canvas"
      style={{ backgroundColor: '#fff', boxShadow: '0 0 6px 0 #666' }}
    >
      <Layer ref={layerRef}>
        {loadedImage && (
          <KonvaImage
            image={loadedImage}
            x={0}
            y={0}
            width={canvasSize.width}
            height={canvasSize.height}
            name="background_image"
            draggable
          />
        )}
      </Layer>
    </Stage>
  );
}

额外排查提示 #

• Vite构建的项目不支持前端代码中的运行时require()语法，必须通过import引入src目录下的静态资源，否则会直接报模块解析错误。
• 本地图片路径错误时不要只看控制台的网络请求报错，可以通过onerror回调捕获加载失败的细节，快速定位路径问题。

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