React中函数组件引入的图片在类组件中无法显示问题求助

大家好，我遇到了一个头疼的小问题：代码运行完全没有报错，但页面上就是看不到我引入的图片，想请各位帮忙排查下问题所在。

先说明下我的文件结构：

• 图片文件My button.png已经重命名为button.png，放在项目根目录的public文件夹里
• 函数组件HelloButton.js和类组件Header.js都在src/components目录下

下面是我的代码内容：

HelloButton.js 代码： #

import React from "react";

function HelloButton() {
  return (
    <a href="">
      <img
        style={{ height: "50px" }}
        alt="hello button"
        src="/button.png"
      />
    </a>
  );
}

export default HelloButton;

Header.js 代码： #

import React, { Component } from "react";
import HelloButton from "./HelloButton";

export default class Header extends Component {
  render() {
    return (
      <div>
        <HelloButton />
      </div>
    );
  }
}

我已经确认图片确实在public文件夹里，文件名也没有拼写错误，但就是看不到图片显示出来。有没有大佬能帮我找找问题呀？

备注：内容来源于stack exchange，提问作者Alper Toy