добавление svg изображения перед опциями выбора - PullRequest
Новая
       15

добавление svg изображения перед опциями выбора

1 голос
/ 05 мая 2020

В настоящее время у меня есть следующий код, который дает мне необходимый раскрывающийся список, но я хотел знать, как изменить галочку на изображение в параметрах 

   <select class="appsearchfilter__seldiv--select">
      <option class="appsearchfilter__seldiv--option">
        <FlatOption class="appsearchfilter__seldiv--option" /> /*-->this is the SVG import and it is component of vuejs */
        Flat
      </option>
      <option class="appsearchfilter__seldiv--option">Door</option>
      <option class="appsearchfilter__seldiv--option">APT</option>
    </select>

Таким образом, я получаю следующее представление enter image description here

Я хочу заменить галочку изображением, которое я добавил в

Ниже мой CSS файл : 

  &__seldiv {
    &--select {
      position: absolute;
      margin-top: 22px;
      margin-left: 321px;
      width: 217px;
      height: 44px;
      border-radius: 8px;
      border: solid 1px #bababa99;
      background-color: #ffffff;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.2;
      letter-spacing: normal;
      text-align: left;
      color: #0e1122;
    }
    &--option {

      color: #ffffff;
    }

У меня есть следующий импорт для SVG

импорт FlatOption из «@ / assets / FlatOption.svg»;

Я пробовал чтобы внести это изменение, но оно все равно не работает 

<option
            class="appsearchfilter__seldiv--select--option"
            :style="{ backgroundImage: 'url(' + require('@/assets/FlatOption.svg') + ')' }"
          >Flat</option>
...