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

发布时间：2024年01月22日

问题背景

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

实现方法

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

效果：
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_44582045/article/details/135741649
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章