React App 中的图像损坏

我正在尝试访问 React 应用程序中的图像。当我运行代码时，我在网页上看到一个损坏的图像图标。我不确定我是否正在访问图像的正确路径。我的代码如下：

import React, { Component } from 'react';

class HeaderName extends Component {
    render() {
        return (
            <div>
                <h1>The AquaStars New Website.</h1>
                <img src="./images/picture_swimmers.png" />
            </div>
            )
        }
}

export default HeaderName; 

The structure of the code is the following

看来您使用了错误的路径。如果我看到这是正确的，那么您上面发布的代码来自 src 文件夹中的 header.js。由于您的图像文件夹是公共的，因此您需要先升级一个文件夹，然后再转到公共文件夹。您想要使用的路径是，

    ../public/images/picture_swimmers.png

请注意，如果您计划创建生产版本，则此路径会有所不同。我之前使用过的一项建议是，如果图像必须位于公共文件夹中，那么您可以像这样引用它们：

    src={process.env.PUBLIC_URL + '/images/picture_swimmers.png'}