即使函数放置在“ 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>   
  );
}