reactjs - 即使函数位于“src”值更改之前，本地图像也不会触发 onload 事件

Question

从 React 组件加载图像后，我需要将图像绘制到画布上。我使用 componentDidMount 函数来引用画布，然后尝试使用 Image() 类绘制本地图像。onload 事件在图像加载后执行绘图功能，但它仅适用于在线图像。如何使它适用于存储在 src 文件夹中的本地图像？

我已经尝试在更改变量的 src 值之前进行 onload 调用。

const canvas = this.refs.canvas;
canvas.width = 800;
canvas.height = 600;
const context = canvas.getContext('2d');

var background = new Image();
// background.src = './assets/background.png';
background.onload = () => {
  alert ( 'This does not fire , only works for online images' );
  context.drawImage ( background , 0 , 0 );
}
background.src = {background_image};

我的组件如下：

render(){
  return(
    <div>
      <canvas ref='canvas'/>
    </div>   
  );
}

标签： reactjs