How to add image to select option element in Vue

Question

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

 <select class="custom-select 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;
}

you can add the image in the CSS with `background-image:url(image.png);` as well — Najme, Jan 24 '22 at 11:51
Not vue.js, but somehow related https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list — Najme, Jan 24 '22 at 11:51

score 0 · Answer 1 · answered Jan 24 '22 at 14:50

0

You can try to use vue-select for better implementation. HTML 5 tag is realy hard to customize.

answered Jan 24 '22 at 14:50

Ruslan Hryshyn

61
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 24 '22 at 15:34

How to add image to select option element in Vue

1 Answers1