使用图像作为带有 react-select 的图标

Question

我想使用 react-select 将图像添加为图标。我做得很好，但我有一个问题，即在反应中，图像是这样写的：

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

所以我像这样使用 react-select ：

const IconOption = (props) => (

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

然后调用选择框：

render() {
    return (
      <Select
        classNamePrefix="react-select"
        placeholder={"Search..."}
        onChange={this.handleChange}
        components={{ DropdownIndicator: () => null, Option: IconOption }}
        options={this.state.options}
        openMenuOnClick={false}
        styles={customStyle}
      />
    );
  }

我试着写：

const IconOption = (props) => (

  <Option {... props}>
    <div>
      {props.data.image}
    </div>
  </Option>
);

这给了我：

./css/img/PROFILEPICTURE.jpg

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

const IconOption = (props) => (

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

图片显示正确。

如果我编写第一个代码，即为选择框中的每个项目获取不同图片的代码，则会出现错误：

在 react 中不使用 img 的 require 函数的任何解决方案？

编辑：

我也试过了：

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

我没有找到图片：

Answer 1

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

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