在React Bootstrap Typeahead中将图片添加到'labelKey'

Question

第一个问题：

在我的演示版本中，stackblitz不会加载CSS样式。 在主应用程序中，样式可以正确加载。 我加了：

import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead / css / Typeahead.css';

第二个问题：

当我选择一个人时，将显示“ URL img”“名称”。我补充说：

`labelKey = {(option) => `$ {option.img} $ {option.name}`}`

如何在labelKey中放入类似内容：

<div style={{backgroundColor: `${option.color}`}}>
  <img
     src = `$ {option.img}` 
     style = {{
       height: '24px',
       marginRight: '10px',
       width: '24px'
      }}
    />
    <span> {option.name} </ span>
</div>

此处演示：black

import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      "people": [
        {
            "id": "1",
            "name": 'Martin',
            "img": 'https://i.imgur.com/Ka0iPAO.jpg',
            "color": 'yellow'
        },
        {
            "id": "2",
            "name": "Paul",
            "img": "https://i.imgur.com/D0krWQ9.jpg",
            "color": 'pink'
        },
        {
            "id": "3",
            "name": "Gregor",
            "img": "https://i.imgur.com/D0krWQ9.jpg",
            "color": 'gray'
        }
      ]
    };  
  }

  render() {
    return (
      <div>
        <Typeahead
          id={'example4'}
          labelKey={(option) => `${option.img} ${option.name}`}  
          multiple
          options={this.state.people}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }
}