React中Fabric.js v6从URL加载图片至画布失败的解决方法

1. 修正静态资源路径 #

React项目中public是静态资源根目录，访问其中文件无需在路径里添加public。你当前的路径会导致资源404，Fabric.js加载失败但无报错提示。

修改路径为：

const imagePath = `/image/${imageName}`;

或使用绝对路径时去掉public：

const imagePath = `http://localhost:5173/image/${imageName}`;

2. 改用Fabric.js v6的Promise式API（更易捕获错误） #

Fabric.js v6推荐使用Promise版本的fromURL，相比回调式能更直观地捕获加载失败的错误，避免静默失效。修改代码如下：

const addImageToCanvas = useCallback(
  async (imageName: string) => {
    if (!fabricCanvasRef.current) {
      console.error("Canvas reference is not available");
      return;
    }

    const canvas = fabricCanvasRef.current as Canvas;
    const imagePath = `/image/${imageName}`;
    console.log("Attempting to load image:", imagePath);

    try {
      const img = await fabric.Image.fromURL(imagePath, {
        // 本地资源无需设置crossOrigin，加载外部跨域图片时再启用
        // crossOrigin: "anonymous",
        left: 0,
        top: 0,
        scaleX: 0.5,
        scaleY: 0.5,
      });
      
      console.log("Image loaded successfully:", img);
      canvas.add(img);
      canvas.renderAll();
      console.log("Image added to canvas");
    } catch (error) {
      console.error("Failed to load image:", imagePath, error);
    }
  },
  [fabricCanvasRef]
);

注意确保正确导入Fabric类：

import { fabric, Canvas, Image as FabricImage } from 'fabric';

3. 检查crossOrigin配置合理性 #

加载本地开发服务器资源时，不需要设置crossOrigin: "anonymous"，该配置仅适用于外部域名的跨域图片。错误配置可能导致浏览器拦截图片加载，且无明显报错。若需加载外部跨域图片，需确保目标服务器配置了正确的CORS响应头。

4. 验证资源是否存在 #

在浏览器地址栏直接访问http://localhost:5173/image/${imageName}（替换为实际图片名），确认图片能正常打开。若无法访问，检查图片是否放在public/image目录下，文件名是否正确（注意大小写）。

5. 确认Canvas实例初始化正确 #

确保你的Fabric Canvas实例初始化流程无误，示例代码如下：

import { useEffect, useRef, useCallback } from 'react';
import { fabric, Canvas } from 'fabric';

const CanvasComponent = () => {
  const fabricCanvasRef = useRef<Canvas | null>(null);

  useEffect(() => {
    const canvasElement = document.getElementById('fabric-canvas');
    if (canvasElement) {
      fabricCanvasRef.current = new fabric.Canvas(canvasElement);
    }

    return () => {
      if (fabricCanvasRef.current) {
        fabricCanvasRef.current.dispose();
        fabricCanvasRef.current = null;
      }
    };
  }, []);

  // ...你的addImageToCanvas函数

  return <canvas id="fabric-canvas" width={800} height={600} />;
};

export default CanvasComponent;

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