Reactjs 将图像用作带有“反应选择”的图标

我想用react select添加一个图像作为图标。我做得不错，但我有一个问题，在react中，图像是这样写的：

<img src={require(...)} />

const IconOption = (props) => (

  <Option {... props}>
    <div>
      <img src={require(props.data.image)} />
    </div>
  </Option>
);

这正是我想要的，路径是正确的。如果我写的是：

const IconOption = (props) => (

  <Option {... props}>
    <div>
      <img src="./css/img/PROFILEPICTURE.jpg" />
    </div>
  </Option>
);

consticonoption=（道具）=>(
);

正确显示图像

如果我编写第一个代码，即为selectbox中的每个项目获取不同图片的代码，我会得到一个错误：

在react中不使用img所需功能的任何解决方案

编辑：

我还尝试：

const IconOption = (props) => 
  (
    <Option {... props}>
      <div>
        <img src={props.data.image} />
        {props.data.label}
      </div>
    </Option>
  );

consticonoption=（道具）=>
(
{props.data.label}
);

我没有找到图像：

---

您只需删除

require

，因为您的图像不是已编译的react应用程序的一部分：

const IconOption = (props) => (
  <Option {... props}>
    <div>
      <img src={props.data.image} />
    </div>
  </Option>
);

consticonoption=（道具）=>(
);

我编辑了我的初始问题以回答您的解决方案。我真的忘了说我已经试过了。我刚刚了解到，只有当你使用公用文件夹，然后使用@Kuartz获得它时，才可能不使用require。我认为这应该是绝对正确的。你能提供指向沙盒的链接吗？

const IconOption = (props) => (

  <Option {... props}>
    <div>
      <img src="./css/img/PROFILEPICTURE.jpg" />
    </div>
  </Option>
);

const IconOption = (props) => 
  (
    <Option {... props}>
      <div>
        <img src={props.data.image} />
        {props.data.label}
      </div>
    </Option>
  );

const IconOption = (props) => (
  <Option {... props}>
    <div>
      <img src={props.data.image} />
    </div>
  </Option>
);