javascript - 如何将外部网站链接到导入的 React src 图像？

Question

我正在使用一个使用 React 的 Gatsby 入门主题，我在代码顶部导入了一个本地镜像，并使用 img src 标记在页面的不同部分中调用它。该图像显示完美，但我希望它在我单击时转到另一个网站。

是否可以将此图片链接到外部网站？

import React from 'react'
import PropTypes from 'prop-types'

import pic03 from '../images/pic03.png'




<article id="guides" className={`${this.props.article === 'about' ? 'active' :
 ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>

   <h2 className="major">Guides</h2>
   <span className="image main"><img src={pic03} alt="" /></span>
   <p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. </p>
   {close}
 </article>

Answer 1

在 Gatsby 中，您可以使用 Link 标签进行内部链接，但对于外部链接，您可以用 <a> 围绕图像。标记并使用 href 指向您想要的位置。像这样:<a href="http://www.google.com"><img src={pic03} alt="" /></a>

您甚至可以设置目标属性来确定是否要在新选项卡中打开，如下所示:<a href="http://www.google.com" target="_blank"><img src={pic03} alt="" /></a>