I need to display a list of countries with their respective flags (they are stored in a database) within a select using the "choices" component, but the images are not rendered in the select.
<select class="form-control enderecamento-postal-sel-pais" asp-for="PaisId">
@if (Model.Paises is not null)
{
foreach (var item in Model.Paises)
{
<option value="@item.Value">@item.Text
<span class="" src="@(item.ImageIcon is not null ? string.Format(MediaTypeConst.MEDIA_TYPE_TO_BASE64_IMAGE_SVG_XML + "{0}", item.ImageIcon) : item.ImageIcon)">
</span>
</option>
}
}
</select>
Asp.net
enderecamentoPostalViewModel.Paises = _paisAppService.GetAllBy(null, null).Select(x => new ImageOptionViewModel
{
Text = x.NomePtBr,
Value = x.Id.ToString(),
ImageIcon = x.ImagemBandeiraURL
});
public class ImageOptionViewModel
{
public string Value { get; set; }
public string Text { get; set; }
public string ImageIcon { get; set; }
}
public class MediaTypeConst
{
public const string
MEDIA_TYPE_TO_BASE64_IMAGE_SVG_XML =
"data:image/svg+xml;base64,";
}
Honestly, I don't know if I'm using the razor correctly, but I would like to get this result:

