How can I implement an image preview feature in my Vue app?

How can I implement an image preview feature in my Vue app?

You can use a combination of Vue's reactive data properties and the FileReader API to create an image preview feature.

Can you provide a code example for that?

Sure! Here's a simple example:

<template>
  <div>
    <input type="file" @change="previewImage" />
    <img v-if="imageUrl" :src="imageUrl" alt="Image Preview" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null,
    };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>

What if I want to restrict the file types to only images?

You can add the accept attribute to your input element like this: <input type="file" accept="image/*" @change="previewImage" />.