在 ReactJS 中构建后无法加载某些图像（与 github 一起提供）

Question

我正在尝试在 github 上启动我的网站。 运行npm run build后，调用serve -s build时一切都按预期加载。 但是，当托管在 github 上时，请参阅网站，我无法加载投资组合图像。 奇怪的是，我能够访问与每个项目关联的文件。

这是我的 ReactJS：

if(this.props.data){
            var projects = this.props.data.projects.map(function(projects){
                return <div key={projects.title} className="columns portfolio-item centreColumn">
                    <div className="item-wrap">
                        <a href={projects.url} target="_blank" rel="noreferrer noopener" title={projects.title}>
                            <img alt={projects.title} src={projects.image} />
                            <div className="overlay">
                                <div className="portfolio-item-meta">
                                    <h5>{projects.title}</h5>
                                    <p>{projects.category}</p>
                                </div>
                            </div>
                            <div className="link-icon"><i className="fa fa-link"></i></div>
                        </a>
                    </div>
                </div>
            })
        }

和json：

"portfolio": {
    "projects": [
      {
        "title": "Blah",
        "category": "blah blah",
        "image": "images/myImage.png",
        "url": "https://example.com"
      },

files和images存储在public folder中。

我尝试过的几件事：

• 不同的浏览器
• 将子文件夹删除到public的根目录。
• 尝试遍历文件夹，如../images/myImage.png等。
• 尝试src={require(projects.image).default} 。

任何建议都非常感谢 - 我迫不及待地想要启动并运行它！

Answer 1

问题出在路径上，它应该是 .PNG 大写我在 github repo 中看到了你的图片，它是 .PNG 而不是 .png

您必须将 github repo 中的 .PNG 更改为 .png