Gatsby: Links to logo image in nav component are broken in the automatically created pages

Created on 7 Dec 2018 · 2Comments · Source: gatsbyjs/gatsby

I am new to gatsby, and I apologize in advance for all the rookie questions.

I am playing around with the gatsby-bootstrap starter. I have created a navi (for the navigation bar) component and am using it in the layout component.

import React from 'react'
import { Link } from 'gatsby'
import "./style.scss"

class Navi extends React.Component {
  render() {
    const { location, title } = this.props
    return (

      <nav className="navbar navbar-expand navbar-light flex-column flex-md-row white-bg sticky-top">
        <div className="container">
            <div className="navbar-header">
              <Link className="navbar-brand" to="/">

            <img src="./img/main-logo.png"  className="align-center" alt="bulamadım" />


          </Link>
    </div>


          <div className="navbar-nav-scroll">
            <ul className="navbar-nav bd-navbar-nav flex-row">
              <li
                className={
                  location.pathname === '/' ? 'nav-item active' : 'nav-item'
                }
              >
                <Link to="/" className="nav-link">
                  Home
                </Link>
              </li>
              <li
                className={
                  location.pathname === '/profile/'
                    ? 'nav-item active'
                    : 'nav-item'
                }
              >
                <Link to="/profile/" className="nav-link">
                  Profile
                </Link>
              </li>
            </ul>
          </div>
          <div className="navbar-nav flex-row ml-md-auto d-none d-md-flex" />
        </div>
      </nav>

    )
  }
}

export default Navi

This is my Layout/index.js

import React from 'react'
import emergence from 'emergence.js'

import Navi from 'components/Navi'
import {Footer, FooterBottom} from 'components/Footer'
import { siteMetadata } from '../../../gatsby-config'

import 'modern-normalize/modern-normalize.css'
import 'prismjs/themes/prism.css'
import 'scss/gatstrap.scss'
import 'animate.css/animate.css'
import 'font-awesome/css/font-awesome.css'

class Layout extends React.Component {
  componentDidMount() {
    emergence.init()
  }

  componentDidUpdate() {
    emergence.init()
  }

  render() {
    const { children } = this.props
    return (
      <div>
        <Navi title={siteMetadata.title} {...this.props} />

        {children}

        <Footer /><FooterBottom/>
      </div>
    )
  }
}

export default Layout

I am now querying data from contentful and generating pages from that data. This is the data detail page template:

import React from 'react'
import PropTypes from 'prop-types'
import get from 'lodash/get'
import Layout from 'components/Layout'

export default class ProductDetail extends React.Component {
render() {
    const product = get(this.props.data,"contentfulProduct")
    console.log(this.props.data)
    return (
      <Layout location={product.id}>
      <div className="container">
        <h1>{product.name}</h1>
        {product.teaser !== null && (<div>teaser: {product.teaser.teaser}</div>)}
        <div>weight_in_grams: {product.weightInGrams}</div>
        <div>ingredients: {product.ingredients}</div>
      </div>
      </Layout>
    );
  }
}

ProductDetail.propTypes = {
    data: PropTypes.object.isRequired
}
export const query=graphql`
    query productDetailQuery ($productId: String!){
       contentfulProduct(id: {eq: $productId}){
           id
           name
           teaser {
               teaser
           }
           weightInGrams
           ingredients
       }

}
`

Now when navigating to productdetail page, the menu items are displayed, however the logo image is not found. At the main index.js it displays correctly.

Source

ergunpp

Most helpful comment

dont use a relative path for the logo. put the logo in the static folder in a new logo folder where it belongs and reference it from there
<img src="/logo/main-logo.png" className="align-center" alt="bulamadım" />