React项目中引用本地图片的问题

问题背景

如图所示，这个按钮
我要点击的时候，显示一张图片

实现方法

// state中定义
popoverContent: (
  <img src={require('./illustrate.png')} style={{ width: '200px', height: 'auto' }} alt='图片' />
),
popoverContent: (
  <img src={'./illustrate.png'} style={{ width: '200px', height: 'auto' }} alt='图片' />
),


<Popover
  content={popoverContent}
  placement='bottomRight'
  title={this.props.t('funds:fundTag.illustrate')}
  trigger='click'
>
  <Button type='primary'>{this.props.t('funds:fundTag.illustrate')}</Button>
</Popover>

这两种定义方式，都结果如下：

md. 不显示

话不多说，直接上解决方法

解决方法

import illustrate from './illustrate.png' // 关键是这一步！！！！

popoverContent: (
  <img src={illustrate} style={{ width: '200px', height: 'auto' }} alt='图片' />
),

<Popover
	 content={popoverContent}
	 placement='bottomRight'
	 title={this.props.t('funds:fundTag.illustrate')}
	 trigger='click'
>
	 <Button type='primary'>{this.props.t('funds:fundTag.illustrate')}</Button>
</Popover>

效果：