# Drop down with images

**URL:** <https://forum.radzen.com/t/drop-down-with-images/3298>\
**Category:** Blazor Server\
**Created:** [April 19, 2020, 9:29am UTC](https://forum.radzen.com/t/drop-down-with-images/3298 "2020-04-19T09:29:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luke\_O\_Brien](https://forum.radzen.com/user_avatar/forum.radzen.com/luke_o_brien/32/2921_2.png) [@Luke\_O\_Brien](https://forum.radzen.com/u/Luke_O_Brien)\
**Post date:** [April 19, 2020, 9:29am UTC](https://forum.radzen.com/t/drop-down-with-images/3298/1 "2020-04-19T09:29:34Z")

</div>

Hi there,

I have a list of countries with a name and SVG flag data, I would like to display them in a drop down with the name appearing alongside the flag.  
Your [DropDown control](https://blazor.radzen.com/dropdown) supports templates, but when I add an `<img>` tag to the template, only it's `alt` attribute is displayed.

How can I display images in the template?  
Do I need to use `backgound-image` css?

Here is my markup:

```html
<RadzenDropDown Data="@ViewModel.AvailableUiCuture" ValueProperty="Code" TextProperty="LanguageName" @bind-Value="UiCultureCode"
                AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="Select..."
                Style="margin-bottom: 20px; width:400px;">
    <Template>
        @{
                var culture = context as UiCulture;
        }
        <img src="@DataUrl.Svg(culture.SvgFlagData)">
        @culture.LanguageName
    </Template>
</RadzenDropDown>

```

Thanks

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [April 20, 2020, 5:38am UTC](https://forum.radzen.com/t/drop-down-with-images/3298/2 "2020-04-20T05:38:43Z")

</div>

Not sure what's not working for you - you might need to debug the code to see if the src is set. Here is what I've tested:

 ![image](https://forum.radzen.com/uploads/default/original/2X/0/0e21f8a088daa124bb0b68ffbace265a5dcd7987.png)  
 ![image](https://forum.radzen.com/uploads/default/original/2X/c/ce3f4d96cf6db34f121e450eb70902fe8d663f9d.png)  
 ![image](https://forum.radzen.com/uploads/default/original/2X/0/09bd23b3a9bcab7e8b8b7996f30503cbc554c61b.png)

---

<div class="post-metadata">

**Author:** ![Luke\_O\_Brien](https://forum.radzen.com/user_avatar/forum.radzen.com/luke_o_brien/32/2921_2.png) [@Luke\_O\_Brien](https://forum.radzen.com/u/Luke_O_Brien)\
**Post date:** [April 22, 2020, 10:16am UTC](https://forum.radzen.com/t/drop-down-with-images/3298/3 "2020-04-22T10:16:32Z")

</div>

Hi there,

Thanks, I think it was an issue with me, perhaps with the Data URL.

Anyway, imgs working now and looks very professional:

 ![radzen-lang-dropdown](https://forum.radzen.com/uploads/default/original/2X/2/2f588c1ed45864d6d963d59a8821d0274476bab8.png)

One thing tho:

1. Clear button on the search.  
In my app I do the translations automaticly by changing the ViewModel, if I search for "German" and then change the selection, the dropdown is empty because non of the options meet the search.

Many thanks,

Luke