如何在选择中显示标志作为选项

Question

我想制作一个下拉列表，哪些项目是标志 我尝试了在 stackoverflow 上找到的解决方案，但它不起作用。

这里是沙盒链接：https://codesandbox.io/embed/reverent-fermat-zssow

const CountrySelect = () => {

返回（

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

出口让国家= [ { 标签：“法国”， 源代码：需要（“./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。看看how to import images in react

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