Home > Software engineering >  How to add image to select option element in Vue
How to add image to select option element in Vue

Time:01-25

I want to add an image into my option element in select element. Here is my html:

 <select >
                    <option value="en">
                        <img :src="EnglishFlag" alt="English Flag"/> EN
                    </option>
                    <option value="de">
                        <img :src="GermanFlag" alt="German Flag"/> DE
                    </option>
                    <option value="ne">
                        <img :src="DutchFlag" alt="Dutch Flag"/> NE
                    </option>
                </select>

But I am not getting an error, nor the flags.

For this here is my css:

.custom-select {
    position: relative;
    width: auto;
    text-align: left;
    outline: none;
    background-color: var(--button-color-done);
    color: #fff;
    cursor: pointer;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
}

CodePudding user response:

Maybe like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      flags: [{country: 'EN', flag: '           
  •  Tags:  
  • Related