如何在react中导入图标图像上的图像

Question

如何将icon = {<AiOutlineFileDone/>}交换为jpeg或png图像文件如下所示：

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
....
<VerticalTimeline >
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#131414' }}
contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
date="November 2020"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon = {<AiOutlineFileDone/>}
>
<h3 className="vertical-timeline-element-title">Title</h3>
<h4 className="vertical-timeline-element-subtitle">Location</h4>
<p>
some info ...
</p>
</VerticalTimelineElement>
</VerticalTimeline>

请查看此链接以查看代码的输出或结果。我只是想在在中间的图标上添加一个图像。

Answer 1

您可以导入要使用的图像的路径，然后使用<img>元素来渲染图像。希望这能有所帮助。

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import myImgSrc from '../path/to/image.png';
....
<VerticalTimeline >
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#131414' }}
contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
date="November 2020"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon = {<img src={myImgSrc} />}
>
<h3 className="vertical-timeline-element-title">Title</h3>
<h4 className="vertical-timeline-element-subtitle">Location</h4>
<p>
some info ...
</p>
</VerticalTimelineElement>
</VerticalTimeline>