GitHub Pages standard way to store and render image assets

Question

How do I store an image in my assets folder and render it on my NavBar?
It works fine when done locally but there are difficulties when doing the same through the web via 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

What would be the standard way to solve this issue? I have searched extensively on google and stack overflow. Most of the solutions were bad path or case-sensitive faults, which seems to be not the case.

Answer 1

were bad path

You do have a bad path. Ensure that when developing locally ../some_logo.png is consitent with what is deployed in public

Example

If locally you are serving up public folder and it works ( /img/some_logo is valid):

• project
  • src
  • public
    • img
    • some_logo

On github pages public should be available at something.github.io/ (so that /img/some_logo is still valid)