Gatsby：img是一个空元素标签，不能有“children”也不能使用“dangerouslySetInnerHTML”。

Question

我正在尝试使用Gatsby Js构建一个组件，其中包含导入的图像。 然而，当添加一个带有锚HTML标记的链接时，我会收到错误信息： img是无元素标签，既不能拥有子元素也不能使用dangerouslySetInnerHTML`。

没有<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链接的正确方法是什么？

- isaacsultan

---

正如错误/警告提示所说，应该使用 <img /> 而不是 <img></img>。 - Andreas

嗨@安德烈亚斯 - 我尝试过 <a href="https://medium.com"> <img src={medium} /> </a>，并收到了相同的错误信息。 - isaacsultan

Answer 1

您应该能够将图像导入组件，并将其添加到图像src中，如下所示。

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

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

export default IndexPage

然而，如果你在开放和关闭的 <img> 标签之间加入任何内容（即使只是一个空格），gatsby 就会认为它有子元素并且无法正确编译。

- ksav

---

谢谢。是标签之间的空格字符！ - isaacsultan

Answer 2

只需删除标签<Image> <Image/>，将其替换为Image组件<Image src='' width={40} height={40} alt ='profile.img'/>。

此外，Image组件还需要以下属性：src、width、height和alt。

- Rohit Patel