GitHub Pages存储和渲染图像资产的标准方法

Question

如何将图像存储在资产文件夹中并在NavBar上呈现？
在本地完成时效果很好，但是在通过GitHub Pages在网络上进行操作时会遇到困难。

import * as React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core/';

class NavBar extends React.Component {
  public render() {
    return (
      <div className='navbar'>
        <AppBar position='static' color="inherit" >
          <Toolbar style={{ paddingLeft: '1em', paddingRight: '1em' }}>
            <img className="navbar-logo-favicon" src="../some_logo.png" height="35" width="35" />
            <Typography variant='title' color='default'>
              Project C
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    )
  }
}

export default NavBar

解决此问题的标准方法是什么？ 我已经在Google上进行了广泛搜索，并且堆栈溢出。大多数解决方案是路径错误或区分大小写的错误，似乎并非如此。

Answer 1

  

路径错误

您的道路确实很糟糕。确保在本地进行开发时../some_logo.png与在公共环境中部署的内容一致

示例

如果在本地，您正在提供public文件夹并且它可以工作（/img/some_logo有效）：

• 项目
  • src
  • 公共
    • img
    • some_logo

在github页面上，public应该在something.github.io/可用（这样/img/some_logo仍然有效）