How to add SVG image to vuetify text field

问题

I am using vuetify and would like to add an SVG icon to the start of the text field. I know you can prepend or append icons from v-icon, but I would like to use my own SVG image in a similar way.

回答1:

Just use the "prepend" slot:

<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>

回答2:

You can read about the public path

I would strongly recommend using the public path:

Add your svg image to public/img/icons/test.svg.

Use the img tag like this <img src="/img/icons/test.svg"> to point to the svg location.

If you really dont want to use the public path for your svg's you can use this loader to import your svg's: https://github.com/visualfanatic/vue-svg-loader

来源：https://stackoverflow.com/questions/53220159/how-to-add-svg-image-to-vuetify-text-field