React - <select> 中的图像答案

【问题标题】：React - image in <select>React - <select> 中的图像
【发布时间】：2021-04-07 20:40:04
【问题描述】：

我想在 React.js 中显示一些国家/地区列表。

<select>
      <option><img src={require('../images/flags/en.png')} /> English</option>
</select>

路径和要求绝对正确，如果我将该图像放在选择之外 - 它会正确显示

首先，它显示[object Object] English，而不是显示标志图像。控制台中也出现错误：index.js:1 警告：仅支持字符串和数字作为子项

我一直在寻找使用 react-select 的解决方案，但如果没有它也可以实现，我很乐意只使用普通标签来解决这个问题。

【问题讨论】：

您使用的是哪个模块捆绑器？一切都取决于您如何加载资产。
您确定require 是必要的吗？我会尝试删除它并仅传递图像 URL。 +1：将alt 属性添加到<img> 标签，因为如果你错过了它会导致警告。
@norbitrial 不幸的是，问题依旧。
你好，你的答案在这里，你不能添加img标签stackoverflow.com/questions/2524953/…。您可以通过 jquery 或等不同方式实现，但您需要编写 css 才能正确排列。我会推荐你使用npmjs.com/package/react-select。有了这个包，你也可以实现你的输出
这能回答你的问题吗？ how can i put an image into select?

【解决方案1】：

<option> 标签只能包含 Strings 和 Numbers 作为“儿童元素”。在您的情况下，您正在尝试插入 img 标签

【讨论】：