使用图像作为反应的图标-select

Question

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

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

所以我这样使用 react-select :

const IconOption = (props) => (

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

然后调用 select 框：

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

图片显示正确。

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

在反应中不使用 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>
);

使用图像作为反应的图标-select

Use image as icon with react-select

image

require

reactjs

react-select