图像未使用 Gatsby 在 React 上本地加载

Question

我运行遇到了一个奇怪的问题，如果我尝试在本地加载图像，则会出现编译错误。

这是我的编译错误：Compile error

import { Link } from 'gatsby'
import * as React from 'react'
import test from '..\images8PxNewAcluLogo2017Svg.png'

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

export default IndexPage

从在线来源加载图像有效。有什么想法吗？

Answer 1

不要使用反斜杠（\），像这样使用：

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

否则，将被解释为转义值。

图像未使用 Gatsby 在 React 上本地加载

Images not loading locally on React using Gatsby

html

reactjs

gatsby