Guide to showing an uploaded image in a child component using Vue.js

Question

Guide to showing an uploaded image in a child component using Vue.js

Using the v-file-input component from Vuetify, I am able to upload images with the following code:

<v-file-input
   label="Image"
    filled
   accept="image/png, image/jpeg, image/bmp"
   prepend-icon="mdi-camera"
   v-model="image"
   ></v-file-input>

When I console.log the v-model image, I receive a File object like this:

File {name: "img.png", lastModified: 1588256009000, lastModifiedDate: Thu Apr 30 2020, webkitRelativePath: "", size: 53258, …}
name: "img.png"
lastModified: 1588256008000
lastModifiedDate: Thu Apr {}
webkitRelativePath: ""
size: 53259
type: "image/png"
....

Now, I am wondering how I can display this Object in the current component or another child component?

javascript vue.js vuetify.js

Answer 1

Answer №1

Set up a computed property called imageSource that retrieves the value of URL.createObjectURL(image) and then you can utilize imageSource within the same component or send it as a prop to a child component:

computed: {
   imageSource() {
       return this.image ? URL.createObjectURL(this.image) : "";
   }
}

Implement the imageSource like this:

<img :src="imageSource" />

Answer 2

Set up a computed property called imageSource that retrieves the value of URL.createObjectURL(image) and then you can utilize imageSource within the same component or send it as a prop to a child component:

computed: {
   imageSource() {
       return this.image ? URL.createObjectURL(this.image) : "";
   }
}

Implement the imageSource like this:

<img :src="imageSource" />

Guide to showing an uploaded image in a child component using Vue.js

Answer №1

Similar questions

Assign a CSS class to a DIV depending on the vertical position of the cursor

Selecting an option from the knockout dropdown menu

Building on the Vuejs3 and Vuex4 framework, create a conditional rendering feature that triggers upon

failure to properly assign a property during model update in mongoose

Iterating through an object using the forEach method (uncommon practice)

Reformat an array containing objects so that their structure is changed to a different format

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

Testing a React component using the `ua-parser-js` plugin with Jest and React Testing Library

Is it possible to employ a jQuery handler as the selector for the .on() method?

Using rxjs for exponential backoff strategy

Is there a way to modify the background color of ::before when hovering over it?

Issue with Yup and Formik not validating checkboxes as expected

What is the best way to create a seamless Asynchronous loop?

Using Javascript to extract formatted text from a webpage and save it to the clipboard

The challenge with Normalizr library in Redux and how to address it

Using JavaScript to replace a radio button with the term "selected"

Can you point me in the direction of the Monaco editor autocomplete feature?

Looking to categorize and sum the values within an array of objects using JavaScript?

Delete entries in table based on user-provided criteria

Storing data from a massive JSON array into a separate array using a specific condition in JavaScript