reactjs - 使用 React-Select 下拉选择选项时图像未显示

Question

我正在尝试在文本左侧使用图像实现选择下拉选项。我使用了 react-select 库，但图像显示已损坏。

这是我的代码：

import React from 'react'
import Select from 'react-select'
import { components } from 'react-select';
import { login } from "../customSelect/login.png";
const options = [
{
    label: 'Option 1',
    value: 0,
    image: "../customSelect/login.png",
},
{
    label: 'Option 2',
    value: 1,
    image: "../customSelect/login.png",
}
];
const customStyles = {
option: (provided) => ({
    ...provided,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
}),
singleValue: (provided) => ({
    ...provided,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
}),

}

const { SingleValue, Option } = components;

const IconSingleValue = (props) => (
<SingleValue {...props}>
    <img src={props.data.image} 
style={{ height: '30px', width: 
'30px', borderRadius: '50%', marginRight: '10px' }}/>
    {props.data.label}
</SingleValue>
);

const IconOption = (props) => (
<Option {...props}>
    <img src={props.data.image} 
    style={{ height: '30px', width: '30px', borderRadius: '50%', 
marginRight: '10px' }}/>
    {props.data.label}
</Option>
);
const SelectOption = () => {

return (
<div>
  <Select
    styles={customStyles}
    components={{SingleValue:IconSingleValue, 
Option:IconOption}}
    options={options}
   />
</div>
)
}

export default SelectOption

这是我得到的结果