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

我使用的是使用react的Gatsby starter主题，我在代码顶部导入了一个本地图像，并使用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>

最佳答案

在Gatsby中，您可以使用Link标记进行内部链接，但对于外部链接，您可以使用<a>标记包围图像，并使用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>