盖茨比：img 是一个无效的元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`

Question

我正在尝试使用 Gatsby Js 构建一个包含导入图像的组件。但是，当 link 与锚点 HTML 标记一起添加时，我收到 img is a void element tag and must neither havechildrennor usedangerouslySetInnerHTML`。

没有<a> ... </a>就没有这样的错误。

我的代码：

import React from "react"
import medium from "../images/medium.png"


const Socials = () => (
    <div>
        <a href="https://medium.com"> <img src={medium}> </img> </a>
    </div>
)
export default Socials

堆栈跟踪：

  in img (at Socials.js:8)
    in a (at Socials.js:8)
    in div (at Socials.js:7)
    in Socials (at pages/index.js:44)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (created by JSONStore)
    in JSONStore (created by RouteHandler)
    in RouteHandler (created by EnsureResources)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (created by EnsureResources)
    in RouteUpdates (created by EnsureResources)
    in EnsureResources (created by LocationHandler)
    in LocationHandler (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Root)
    in Root
    in _default

向图像添加 URL link 的正确方法是什么？

Answer 1

您应该可以将图像导入您的组件，并像这样将其添加到图像 src。

import React from "react"
import gatsbyIconImage from "../images/gatsby-icon.png"

const IndexPage = () => (
  <>
    <a href="https://whosebug.com"><img alt="stack overflow" src={gatsbyIconImage}></img></a>
  </>
)

export default IndexPage

但是，如果您在开始和结束 <img> 标记之间放置任何内容（即使只是一个 space），gatsby 似乎认为它具有子元素并且将无法正确编译。

盖茨比：img 是一个无效的元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`

Gatsby: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

html

javascript

reactjs

gatsby