Gatsby: imported image not showing up and logging as undefined...

[rchrdnsh]

I have an image that I am importing into a page, like so:

import React from 'react'

import { PlayButton } from '../images/controls/play-button.svg'

console.log(PlayButton)

const IndexPage = () => (
  <>
    <img src={PlayButton} alt="Play Button"/>
  </>
)

export default IndexPage

...and I have verified that the path is correct. But the image is not showing up on the site, only the alt text. The console log also comes back as undefined. Not sure what I need to do. Even if I specify a specific size via css it still does not show up. This seems quite odd, I would think, and I can't figure out why it's not working.

Any thoughts?

[lannonbr]

@rchrdnsh try removing the {} symbols around PlayButton and see if it works then:

import PlayButton from '../images/controls/play-button.svg'

[rchrdnsh]

AHHH!!! I knew I was missing something dumb! Thank you! XD