Javascript 盖茨比：img是一个空元素标记，不能有'children'，也不能使用'dangerlysetinerhtml'`

我正在尝试用Gatsby Js构建一个组件，其中包含一个导入的映像。但是，当使用锚HTML标记添加链接时，我收到的

img是一个无效元素标记，不能有子元素
，也不能使用
危险的HTML`

没有
没有这样的错误

我的代码：

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

向图像添加URL链接的正确方法是什么？
您应该能够将图像导入到组件中，并像下面这样将其添加到图像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

从“React”导入React
从“./images/gatsby icon.png”导入gatsbyIconImage
常量索引页=（）=>(
)
导出默认索引扩展

但是，如果在开始和结束标记之间放置任何内容（即使只有一个空格），盖茨比似乎认为它有子元素，无法正确编译
 正如错误/警告所说。这是
不是
你好@Andreas-我试过了`“>`并收到了同样的错误谢谢。这是标签之间的空格字符！
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