Images not loading locally on React using Gatsby

Admin 1
Viewed 30

I'm running into a weird issue where if I try to load an image locally, I get a compile error.

This is my compile error: Compile error

import { Link } from 'gatsby'
import * as React from 'react'
import test from '..\images\128PxNewAcluLogo2017Svg.png'

const IndexPage = () => {
  return (
    <main>
      <img src={test} alt="test" />
    </main>
)
}

export default IndexPage

Loading the image from an online source works. Any ideas?

gatsby reactjs html
1 Answers

Don't use counter slashes(\), use it like:

import { Link } from 'gatsby'
import * as React from 'react'
import test from '../images/128PxNewAcluLogo2017Svg.png'

const IndexPage = () => {
  return (
    <main>
      <img src={test} alt="test" />
    </main>
)
}

export default IndexPage

Otherwise, it will be interpreted as escaping values.

user_55853710
Related