React项目中如何导入JPG图片替代SVG作为Dropdown的leftIcon展示

问题原因 #

你当前的leftIcon属性本身没有文件格式限制，无法正常显示jpg头像的核心原因有两个：

• 导入的jpg文件返回的是图片资源的URL字符串，你之前使用的SVG是直接导入为React组件，直接传字符串到leftIcon只会在页面渲染出一串资源地址，不会生成图片元素
• 现有CSS仅给.icon-button下的svg设置了尺寸规则，没有适配img元素的样式，就算手动生成图片元素也会出现错位、溢出的问题

解决方案 #

第一步：修改App.js中头像项的配置 #

找到My Profile对应的DropdownItem代码，把传入URL改为传入img元素：

// 原来的代码
<DropdownItem leftIcon={avatar}>My Profile</DropdownItem>

// 修改后的代码
<DropdownItem leftIcon={<img src={avatar} alt="用户头像" />}>My Profile</DropdownItem>

第二步：补充CSS适配图片样式 #

在index.css的.icon-button svg样式规则后追加img的适配规则：

.icon-button svg {
  fill: var(--text-color);
  width: 20px;
  height: 20px;
}
/* 新增下面的img样式 */
.icon-button img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

修改完成后即可正常显示jpg格式的头像，显示效果和其他SVG图标保持一致。

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