gatsbyjs, reactjs - error when changing image (logo - Kaldi theme) - reactjs

Question

I am new to Gatsby. I was able to get a site working on Netlify and need help with with swapping out the logo. I did find this response from another question/post helpful in understanding how Gatsby works but the code I submitted based on the other response didn't work in my case.
gatsbyjs, reactjs -images do not appear?
** summary of response to link above ***
For your image not showing up, this is why: Everything in your src folder is meant to be dynamic, meaning it won't be served directly. If you want to include image statically, you can create a public folder in your root directory (at the same level with src folder), and put images in there. Anything in this public folder will be served directly. So for example, you can have this structure:
|-- src
`-- public
`-- images
`-- logo.png
Then in your code, you can include the path like
<img src="/images/logo.png" alt="logo" />
1) Github repository:
egatsby-starter-netlify-cms
2) Site URL
3) Code Changes: SRC/Navbar.js (this is where I believe the header/logo code is located)
-- the last line is what I added and the line above it is the original (commented out)
import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
{/* import logo from '../img/logo.svg' */}
import logo from '../image/logo.png'
4) Error message when I deployed to Netlify
1:02:18 PM: success Generating image thumbnails - 0.780s - 17/17 21.80/s
1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'
1:03:29 PM: error UNHANDLED REJECTION Converting circular structure to JSON
1:03:29 PM:
1:03:29 PM: TypeError: Converting circular structure to JSON
1:03:29 PM:
1:03:29 PM: - JSON.stringify
Any suggestions would be greatly appreciated.

Answer 1

This is the wrong path i.e. "/" means project root directory:
<img src="/images/logo.png" alt="logo" />
compared to this which means "go up one directory from current directory of this source file":
import logo from '../image/logo.png'
Do this:
// Use an IDE to check if this path is valid and points to the right file
import logo from '../image/logo.png'
// ...
// refer to the imported logo in the source
<img src={logo} alt="logo" />
The build error on Netlify seem to be unrelated to your image chainging issue.
1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'
The "gatsby-plugin-netlify-cms" plugin is throwing an error because it expects a file to be somewhere in the netlify cms. But you have that file directly in your git project. You don't need to have the image BOTH in your git project and the CMS. Pick one location.
The Gatsby starters can be quite overwhelming for someone who is just starting out with gatsby. At least I felt this way. My suggestion: Start from the basics, then add complexity step by step.
Use the basic gatsby starter from the tutorial
Change the image there, test if publish to netlify is successful
add the netlify cms plugin manually to this basic starter
Learn about how to integrate plugins correctly
Change the image to netlify cms, test if publish to netlify is successful
Now you understand each step towards your problem. Now use the complicated gatsby-starter-netlify-cms and change the code there.

Answer 2

I was able to get the image (logo) changed. I used Illustrator to create a .svg file and then just uploaded it to Github (renamed it logo2.svg) and changed the name in the Navbar.js file
import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
import logo from '../img/logo2.svg'
However, the new image (logo) is too small and I don't know enough about .svg or other settings to get it to show properly.
Here is the image I uploaded into Git and how it shows using Chrome inspect
enter image description here
Here is how the original image looks in Chrome inspect
enter image description here
Just thought it might help others. Unfortunately I am not well versed with .svg files. It would be great if there was a simpler, more elegant option - i.e. using a static .png file.
There is another snippet of code that defines the logo width but when I changed it to "200" (same width as new logo) it caused the header to widen too far (created a large vertical whitespace).
div className="navbar-brand">
<Link to="/" className="navbar-item" title="Logo">
<img src={logo} alt="MetaMedia" style={{ width: '88px' }} />