Как я могу отображать флаги в качестве опции в выборе

Question

Я хотел бы сделать выпадающий список, какие элементы являются флагами. Я попробовал решение, которое нашел в stackoverflow, но оно не работает.

Вот ссылка на песочницу: https://codesandbox.io/embed/reverent-fermat-zssow

const CountrySelect = () => {

return (

<div className="country-select-ctn item">
     <select  name="country-select" id="country-select">
     {countries.map((option, index) =>
   <option style={{backgroundImage:`url(${option.src})`}}  key={index} value={index}> //Solution A => Empty field
     <img src={`${option.src}`} alt='foo' style={{backgroundImage:`url(${option.src})`}} />  //Solution B => [Object objet] 
   </option>
  )}
     </select>
</div>

);};

экспортировать по умолчанию CountrySelect;

экспортировать let страны = [{label: "France", src: require ("./ assets / flags / france.png"), ссылка:"", значение: "FR"}]

I want to know why am i getting [Object object]

Answer 1

Должно быть просто:

<option style={{backgroundImage:`url(${option.src})`}}  key {index} value={index}>

Answer 2

Вы не используете require. Посмотрите на , как импортировать изображения в реакции

export let countries = [
    {
      label:"France",
      src: require("./assets/flags/france.png"),
      link:" ",
      value:"FR"
    }
  ]

Вы можете также сделать изображение вместо backgroundImage

   <option key={index} value={index}>
        <img src={option.src} alt='foo' style={{/*...*/}} />
   </option