Question

我正在尝试使用Gatsby Js构建一个包含导入图像的组件。但是，当使用锚点HTML标签添加链接时，我收到img is a void element tag and must neither have孩子nor use危险地SetInnerHTML`。

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

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似乎认为它具有子元素并且无法正确编译。

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

1 个答案: