Skip to content
Advertisement

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

Advertisement

Answer

  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.

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement