React中如何将react-vertical-timeline组件的图标替换为图片？

要把VerticalTimelineElement组件的图标换成JPEG/PNG格式的自定义图片，按下面几步操作即可：

• 导入本地图片文件
  用ES6 import或者require语法引入你的图片，注意路径要和实际文件位置匹配：

  // ES6 import 方式
  import CustomIcon from './assets/your-icon.png'; // 替换成你的真实图片路径
  
  // 或者用 require 方式
  const CustomIcon = require('./assets/your-icon.png');
  

• 替换icon属性为img标签
  把原来的图标组件替换成<img>标签，传入导入的图片资源，同时调整样式让图片适配时间线的图标容器：

  <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)', padding: '6px' }}
      // 用img标签作为图标，设置宽高自适应容器
      icon={<img src={CustomIcon} alt="自定义时间线图标" style={{ width: '100%', height: 'auto' }} />}
    >
      <h3 className="vertical-timeline-element-title">Title</h3>
      <h4 className="vertical-timeline-element-subtitle">Location</h4>
      <p>
        some info ...
      </p>
    </VerticalTimelineElement>
  </VerticalTimeline>
  

• 优化显示样式（可选）

  • 如果图片尺寸不合适，可以给<img>固定宽高，比如style={{ width: '28px', height: '28px' }}
  • 不需要默认背景色的话，直接删除iconStyle里的background属性即可
  • 想让图片和默认图标一样是圆形，给<img>添加borderRadius: '50%'样式

内容的提问来源于stack exchange，提问作者ThatGuyNick