React:在Image Src中使用状态变量？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: 'https://example.com/default.jpg' // 默认图片URL
    };
  }

  handleClick = () => {
    this.setState({
      imageUrl: 'https://example.com/new.jpg' // 点击后更新图片URL
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Change Image</button>
        <img src={this.state.imageUrl} alt="example" />
      </div>
    );
  }
}

export default MyComponent;