在 vue js 的选项标签中显示带有名称的图像

Question

我正在使用带有 html 的 vue，并且我正在尝试使用国家/地区名称和标志填充选择标签中的选项 名称和其他内容显示正常，当我检查图像时，图像的 url 也显示在代码中，它是有效的，但它没有显示在选项标签内 是不是造型问题 P.s 现在我不想使用 v-select

我的选择

<select name="country" class="selectedImg">
<option>Select your country</option>
    <option class="text-center"   v-for="row in pics" :style="{ backgroundImage: 'url(' + row.flag+ ')' }" style="background-size: 10px;

    background-position: bottom;
    background-repeat: no-repeat;" :value="row.flag">
                        {{row.name}}<img :src="row.flag" width="10"/>   
        </option>
</select>

并且显示的网址是有效的

Answer 1

您不能在选项标签内添加图像。我认为您在这里有三个选择：

• 使用 CSS 并像 background-image 一样添加图像（在同一选项标签中或在 :after 或 :before 伪元素中）

• 使用图标而不是图像来呈现标志（使用诸如 FontAwesome 或 https://github.com/lipis/flag-icon-css 之类的库

• 使用 Select2（或 tail.select 或类似的）库，以便能够有更智能的选择来处理选项内的 html。