Search code examples
javascriptvue.jsvue-componentvuetify.jsvuetify-datatable

How to show image on v-text-field?


<v-text-field
 v-model="form.gambar_sertifikat"
 label="Gambar Sertifikat"
 outlined
 readonly
><v-img :src="url"></v-img>

enter image description here

data(){
form: {
       gambar_sertifikat:null,
      }
}

computed

url() {
      if (!this.gambar_sertifikat) return;
      return URL.createObjectURL(this.gambar_sertifikat);
    },

Result: my photo don't wanna show on field enter image description here


Solution

  •   computed: {
        url() {
          return this.gambar_sertifikat && require(this.gambar_sertifikat)
        }
      }
    

    should work for getting the correct URL. However, it won't show inside the filed, if that's what you're trying to do.
    Text form inputs cannot contain images (other than displayed as background images). They cannot contain any flow content, for that matter.

    The image will be displayed beside the field, and the field will show the url.

    Documentation: Asset URL Handling | Vue Loader.