reactjs - 在 React 的 Canvas 元素上加载图像

Question

我正在尝试将图像加载到 React 中的 Canvas 上。这是我用来执行此操作的代码。

import React, { Component } from 'react';

class Image extends Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    const canvas = this.canvasRef.current;
    const context = canvas.getContext('2d');
    const image = new Image();

    image.onload = () => {
      context.drawImage(image, 0, 0)
    }

    image.src = 'http://lorempixel.com/400/200/sports/1/';

  };

  render() {
    return(
        <div>
          <canvas ref={this.canvasRef} width={2400} height={1200}/>
        </div>
    );
  }
}

export default Image

然而，每当我加载图像时，我都会得到空白页。我遵循了 How to load Image on canvas in React? 的答案, draw image on canvas , 和 How could we load a local image on a canvas? .这些步骤似乎都没有在 Canvas 上获得图像。我唯一成功的一次是遵循此博客中的步骤 https://blog.cloudboost.io/using-html5-canvas-with-react-ff7d93f5dc76但在我看来，加载图像两次应该是不必要的，因为图像应该在 onLoad 方法中加载。我还尝试将 image.src 分配移动到 onLoad 方法之后和之前，正如其他人在引用的 SO 问题中所建议的那样，但它不起作用。控制台也没有问题。

此类正在加载到 App.js 文件中，然后使用 yarn start

运行该文件

import React from 'react';
import Image from './Image';

function App() {
  return (
    <div className="App">
        <Image/>
    </div>
  );
}

export default App;

Answer 1

将您的图像保存在目录的public 文件夹中