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

最新推荐文章于 2024-07-09 22:33:20 发布

老电影故事

最新推荐文章于 2024-07-09 22:33:20 发布

阅读量487

点赞数 7

文章标签： react.js 前端

本文链接：https://blog.csdn.net/weixin_44582045/article/details/135741649

版权

问题背景

在这里插入图片描述
如图所示，这个按钮
我要点击的时候，显示一张图片

实现方法

// 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>