Next.js+Matter.js中drawImage报错：图片元素处于broken状态求助

错误根源 #

在Next.js中从public目录导入图片时，得到的是编译后的路径字符串，而非可直接用于Canvas的HTMLImageElement。Matter.js的sprite.texture要求传入已加载完成的<img>对象，直接传路径会导致Matter.js加载图片失败，触发图片处于broken状态的错误。

解决方法 #

方法1：单张图片异步加载后创建物理体 #

修改initImageBox函数，先创建原生Image实例，等图片加载完成后再绑定到物理体的纹理上：

function initImageBox() {
  const flutterImg = new Image();
  flutterImg.src = flutter; // 用Next.js导入的路径作为图片源

  // 图片加载完成后再创建物理体
  flutterImg.onload = () => {
    addRect(200, 200, 200, 200, {
      render: {
        sprite: {
          texture: flutterImg,
          // 可选：适配盒子尺寸，避免图片拉伸
          xScale: 200 / flutterImg.width,
          yScale: 200 / flutterImg.height
        }
      }
    });
  };

  // 捕获加载错误，方便排查问题
  flutterImg.onerror = (err) => console.error('图片加载失败:', err);
}

方法2：批量加载图片（多图标场景） #

如果需要加载多个技能图标，封装一个Promise工具函数批量加载，确保所有图片就绪后再初始化物理场景：

// 封装图片加载Promise
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = reject;
  });
}

// 修改useEffect逻辑
useEffect(() => {
  const canvas = canvasRef.current;
  const cw = 1000;
  const ch = 1000;

  let engine, render, runner, mouse, mouseConstraint;

  async function init() {
    try {
      // 批量加载所有需要的图片
      const [flutterImg, androidImg, dartImg] = await Promise.all([
        loadImage(flutter),
        loadImage(android),
        loadImage(dart)
        // 其他图片按需添加
      ]);

      initScene();
      initMouse();
      initGround();

      // 用加载完成的图片创建物理体
      addRect(200, 200, 200, 200, {
        render: { sprite: { texture: flutterImg, xScale: 200/flutterImg.width, yScale:200/flutterImg.height } }
      });
      addRect(400, 200, 200, 200, {
        render: { sprite: { texture: androidImg, xScale: 200/androidImg.width, yScale:200/androidImg.height } }
      });
    } catch (err) {
      console.error('图片加载失败:', err);
    }
  }

  init();

  // 组件卸载时清理Matter.js资源，避免内存泄漏
  return () => {
    if (runner) Runner.stop(runner);
    if (render) Render.stop(render);
    if (engine) Engine.clear(engine);
  };
}, []);

关键注意点 #

• 必须等待图片onload触发后再创建带纹理的物理体，确保图片完全加载。
• 用xScale和yScale适配物理盒子的尺寸，避免图片拉伸变形。
• 组件卸载时一定要停止Matter.js的Runner和Render，防止内存泄漏。

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