Images in svg format are not rendering inside select component - asp.net core mvc

87 Views Asked by At

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.

enter image description here

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

enter image description here

0

There are 0 best solutions below