Как добавить изображение SVG для проверки текстового поля

Question

Я использую vuetify и хотел бы добавить значок SVG в начале текстового поля. Я знаю, что вы можете добавлять или добавлять иконки из v-icon, но я бы хотел использовать свое собственное изображение SVG аналогичным образом.

Answer 1

Просто используйте слот «prepend»:

<v-text-field label="My text field" type="text">

    <template v-slot:prepend>

      <img width="24" height="24" src="[PathToAssets]/whatever.svg" >

    </template>

  </v-text-field>

Answer 2

Вы можете прочитать о публичном пути

Я настоятельно рекомендую использовать публичный путь:

Добавьте изображение SVG к public/img/icons/test.svg.

Используйте тег img, как этот <img src="/img/icons/test.svg">, чтобы указать местоположение SVG.

Если вы действительно не хотите использовать публичный путь для svg, вы можете использовать этот загрузчик для импорта svg: https://github.com/visualfanatic/vue-svg-loader