How to show images in a GatsbyJS project?

Question

How to show images? It can not be shown correctly below.

In the src/components/Header.js file:

Answer 1

Create a gatsby-node.js file at the root of your project if you don't already have one and add this:

const path = require("path")

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
      alias: { react: path.resolve("./node_modules/react") },
    },
  })
}

This does two things:

1. It will make src the base for your imports
2. It will ensure that you don't run into weird bugs due to multiple versions of React getting loaded (plugins that need to reference React can cause this).

In your Header.js file, you can now do this:

import logo from "images/logo.png"

export const Header => 
  

    
  

The rendered result of this will actually be different depending on the file size of your logo. If it's small enough, Gatsby will inline it using base64, reducing the number of HTTP requests required to load your page. If it's larger, it will be given an asset fingerprint and added to the assets available when your site is built and the URL to the file will be used for the src attribute (e.g. /images/logo-123asd.png). This will allow you to use HTTP cache headers that tell the browser it's safe to cache this file for a long time; if it changes, the URL will change and you don't need to worry about invalidating the cached version.