Как отобразить предварительный просмотр изображения перед отправкой формы с vue. js?

Question

Я создал vue форму, но не могу получить свою форму для предварительного просмотра изображения, которое они хотят отправить в форму.

После обновления страницы я вижу изображение, но при загрузке ссылка на предварительный просмотр не работает. Существует возможность удалить изображение, эта опция работает, но теперь цель состоит в том, чтобы отобразить предварительный просмотр изображения.

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

Методы:

 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);
        },

Как я могу заставить эту работу?

Answer 1

Я думаю, вы можете заменить:

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

на

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

, и тогда предварительный просмотр должен работать нормально.

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>

---

Кроме того, вы можете упростить код, удалив this.createImage(files[0]) и использовать URL.createObjectURL() для загрузки URL изображения:

Демонстрация # 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>

Answer 2

Поскольку вы сохранили данные base64 в vm.image, вы можете поместить их в src следующим образом:

<img :src="image"/>

Лучше прочитать данные следующим образом:

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

Answer 3

Спасибо за ваше время и ответы.

Но я нашел решение этой проблемы.

Мне пришлось добавить полный путь к образу при монтировании.

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

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

И правильно определить атрибут sr c следующим образом:

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