React函数组件中如何在Canvas元素内绘制加载的本地图片

• 异步加载时序错误：Image实例加载图片是异步流程，设置image.src后立刻调用context.drawImage()时，图片尚未完成下载与解码，canvas实际绘制的是空对象。
• 路径不符合前端资源访问规则：浏览器出于沙箱安全限制，前端JS无法直接读取操作系统本地的绝对路径/home/ben/consensys/eth-og/src/static/preview.jpg，必须通过项目静态资源服务的可访问路径加载。
• useEffect配置错误：当前useEffect未传入依赖数组，会在组件每次重渲染时重复执行，产生无意义的性能开销。

步骤1：修正静态资源引用方式，二选一即可： #

1. 将preview.jpg放入项目根目录的public/static文件夹下，引用路径写为/static/preview.jpg，开发/生产环境的开发服务器会自动处理该路径的资源返回。
2. 在Canvas组件顶部通过import引入图片：import previewImg from './static/preview.jpg'，设置image.src = previewImg，打包工具会自动转换为可访问的资源路径。

步骤2：调整绘制逻辑，等待图片加载完成后再执行绘制 #

修改后的Canvas组件完整代码如下：

import { useEffect, useRef } from 'react';
// 选用第二种资源引用方式时打开下面的注释，对应调整image.src赋值
// import previewImg from './static/preview.jpg';

export default function Canvas({ width, height }) {
    const myCanvas = useRef();

    useEffect(() => {
        const context = myCanvas.current?.getContext('2d');
        if (!context) return;
        
        const image = new Image();
        // 图片加载完成后再绘制到canvas
        image.onload = () => {
            context.drawImage(image, 0, 0, 100, 100);
        };
        // 可选：添加加载错误监听，方便排查路径问题
        image.onerror = (error) => {
            console.error('图片加载失败，请检查路径配置', error);
        };
        // 第一种资源引用方式的路径赋值
        image.src = '/static/preview.jpg';
        // 第二种资源引用方式的路径赋值
        // image.src = previewImg;
    }, [width, height]); // 添加依赖数组，仅宽高变化时重执行逻辑

    return (
        <canvas
            ref={myCanvas}
            width={width}
            height={height}
        />
    )
}

如果是基于Create React App搭建的项目，src目录下的资源只有通过import引入才会被打包工具识别处理，直接写src目录下的绝对路径无法正常访问。

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