How to display an image preview before submitting a form with vue.js?

user_11875009 0
Viewed 2634

I have made a vue form but can't get to work my form for previewing the image they want to submit to the form.

After the page is refreshed I can see the image, but on upload the preview link is broken. There is an option to remove an image, that option works, but now goal is to display an image preview.

                   <div class="image-block">
                            <div @click="selectImage('initial-image')">
                                <img class="img-icon"
                                     v-if="imageName === null">
                                <div :class="{'error' : errors.length > 0}" class="text-center"
                                     v-if="imageName === null">
                                    Select an image to upload
                                </div>
                            </div>
                            <div class="image-preview" v-if="imageName !== null">
                                <div class="remove-image" @click="removeImage"><i
                                    class="fa fa-remove"></i>
                                </div>
                                <img v-bind:src="'/images/json-ld/images/' + imageName" class="growth-image"
                                     @click="selectImage('initial-image')">
                            </div>
                        </div>
                        <validation-provider name="image" v-slot="{ validate, errors }">
                            <input type="file" @change="validate" name="image" accept="image/*"
                                   class="hidden"
                                   v-on:change="showFilePreview">
                            <span class="validation-error form-span">{{ errors[0] }}</span>
                        </validation-provider>

Methods:

 removeImage() {
            this.imageName = null;
        },
        selectImage(id) {
            document.getElementById(id).click();
        },
        showFilePreview(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            let vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

How could I make this work?

vuejs2 vue.js forms javascript
3 Answers

I think you can replace:

<img v-bind:src="'/images/json-ld/images/' + imageName" .. />

with

<img v-bind:src="image" .. />
// Or, using bind shortcut
<img :src="image" .. />

and then preview should work fine.

Demo #1

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      let reader = new FileReader();
      let vm = this;
      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
})
#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

Also, you can simplify the code by removing this.createImage(files[0]) and use URL.createObjectURL() to get uploaded image url:

Demo #2

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.image = URL.createObjectURL(files[0]);
    }
  }
})
#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

user_18238410

Since you saved the base64 data in vm.image, you can then put it in the src as follows:

<img :src="image"/>

It is better to read the data as follows:

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
     this.image = reader.result;
};
user_74863130

Thanks for your time and answers.

But I found a solution to this problem.

I had to add the full image's path on mount.

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

And properly define the src attribute like so:

 <img v-bind:src="imageName" @click="selectImage('initial-image')">
user_118750090
Related