Gatsby：img是一个空元素标签，既不能有`Children`，也不能使用`DangerouslySetInnerHTML`

问题描述

我正在尝试使用Gatsby Js构建一个组件，其中包括导入的图像。但是，当使用锚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链接添加到图像的正确方法是什么？

推荐答案

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

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是一个空元素标签，既不能有`Children`，也不能使用`DangerouslySetInnerHTML`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！