How to show image on v-text-field?

Question

<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

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Aug 02 '22 at 04:46

tao · Accepted Answer · 2022-08-02T04:52:22.110

  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.

How to show image on v-text-field?

1 Answers1