Question

您能告诉我为什么在react js中显示多个图像吗？我正在尝试使用canvas加载图像。 https://codesandbox.io/s/o4o98kwy0y

class App extends Component {
  constructor() {
    super();
    this.state = {
      src:
        "https://cdn-images-1.medium.com/max/1600/1*W1IPZj18aerIffSO321a2w.png"
    };
  }

  componentDidMount() {
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext("2d");
    const img = this.refs.image;
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      ctx.font = "40px Courier";
      ctx.fillText(this.props.text, 210, 75);
    };
  }
  render() {
    return (
      <div className="App">
        <canvas ref="canvas" width={640} height={225} />
        <img ref="image" src={this.state.src} className="hidden" />
      </div>
    );
  }
}

Answer 1

第二张图片是由于<img />标签所致。您需要将styles.css文件中的img隐藏起来：

.App {
    font-family: sans-serif;
    text-align: center;
}
.hidden {
    display: none;
}

为什么在React JS中显示多个图像？

1 个答案: