在React-Select中使用图像作为图标

Question

我想在react-select中添加一张图片作为图标。我已经做了所有正确的事情，但是我遇到了一个问题，在react中，图片是这样写的：

<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>
  );

我发现没有找到图片：

- Kuartz

---

请提供沙箱链接，好吗？ - fuser

Answer 1

你只需要删除require，因为你的图片不是编译后的React应用程序的一部分：只需删除require即可。

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

- Thomas Kekeisen

---

我编辑了我的初始问题以回答你的解决方案。我确实忘了说我已经尝试过了。 - Kuartz

我刚学到如果使用公共文件夹并使用<img src={process.env.PUBLIC_URL + '/img/PROFILPICTURE.jpg'}>，就可以不使用require。我将按照这种方式进行。这样做是否危险？ - Kuartz

@Kuartz 在我看来，这应该绝对没问题。 - Thomas Kekeisen