Preview an image before it is uploaded VUEjs [duplicate]

Answer 1

Please keep in mind that a browser cannot display all image types, (eg: a tiff won't work with this method).

There's a few steps:

• Have a file input with a @change listener
• In the onChange, you create an object URL
• Use this URL to display the image

const vm = new Vue({
  el: '#app',
  data() {
    return {
      url: null,
    }
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      this.url = URL.createObjectURL(file);
    }
  }
})

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

#preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

#preview img {
  max-width: 100%;
  max-height: 500px;
}