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?

javascriptvue.jsvuetify.js

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Analyzing Dynamic Content

Currently, I am engaged in content parsing and have successfully executed a sample program. To demonstrate, I have utilized a mock link which you can access below: Alternatively, you can click on this link: Click Here In the provided link, I have parsed ...

javajavascriptxpathjsoupweb-crawler

Why does this asynchronous function initially return nothing, only to suddenly return all results on subsequent tries?

My current task involves inserting data into my database within a map loop. To ensure that the loop completes before proceeding, I am utilizing an async function to store all results in the variable "practicasAgregadas." This is how I invoke the function: ...

javascriptexpressasynchronouspromise

Tips for setting up a cleanup function in useEffect when making API calls within a context provider

Looking to showcase a list of products categorized and fetched from an API? Check out the code snippet below: const API = "https://dummyjson.com/products"; const ProductsList = () => { const { cate } = useParams(); //retrieving category fro ...

javascriptreactjs

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

In my limited knowledge of JavaScript, I have come across an issue with the following code: function example() { document.getElementById("example").innerHTML = "<script>document.write(example)</script>"; } Unfortunately, this code doesn&ap ...

javascripthtmlinnerhtml

What could be the reason behind getting a useLayoutEffect error when using renderToString to render a Material-UI component?

Currently, I am utilizing React version 16.12.0 along with @MaterialUI/core version 4.8.1. The challenge I am facing involves creating a custom icon for a React Leaflet Marker. The icon in question is a Fab component sourced from Material-UI. In order to ...

javascriptreactjsmaterial-uireact-leaflet

Express: router.route continues processing without sending the request

I've implemented the following code in my Express application: var express = require('express'); // Initializing Express var app = express(); // Creating our app using Express var bodyParser = require(' ...

javascriptnode.jsexpress

differences in opinion between JavaScript code and browser add-ons/extensions

As the owner and developer of an e-commerce website, I find that potential customers often contact us regarding ordering issues. Upon investigation, we consistently discover that the problem is caused by JavaScript errors. We frequently check their browse ...

javascriptangularjsgoogle-chrome-extensionfirefox-addon

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

I'm wondering if it's possible to fork an npm library in package.json and automatically trigger its build process upon installation

I am currently facing an issue with a npm dependency, such as ngx-infinite-scroll, that I am trying to fork for bug fixes. I want to include my modified version as a dependency in my application. Here is an example of how I have included it in my package.j ...

javascriptnpm

How can I code in React to make one button change color while the others remain a different color, instead of all having the same color?

I developed a quiz application that changes the color of answer buttons based on user selection. If the user clicks the correct answer button, it turns green, and if they click the wrong answer, it turns red with the correct answer displayed in green. Howe ...

javascriptreactjs

Code has been loaded successfully for react-loadable Chunks, however it has not been

Encountering a problem while trying to implement chunks in my React app using react-loadable Everything functions perfectly on webpack-dev-server in development mode. However, when I build the project and deploy it to the server, async components are ...

javascriptreactjswebpackimportreact-loadable

"What is the best way to connect a md-input to the value of a md-slider

I'm in the process of developing an application using Angular 2.0/meteor, and I'm facing a challenge with binding an input to md-slider. Below is the HTML code for the component: <div class="panel-body"> <form [formGroup]="filtreFor ...

javascriptjqueryangularmaterial-design

Ember Component Incorporating Keyboard Input

I recently developed an ember component that features a rectangular block in a green canvas. Everything is working smoothly so far. However, I am facing some challenges with implementing keyboard input commands (A S D W) to navigate the rectangle within t ...

javascriptjqueryember.jscomponents

Extracting content from a concealed frame and displaying it on a visible frame via javascript

Is there a method to extract a specific DIV element from an HTML frame and display it in a visible frame using JavaScript? For instance, if I create a hidden frame containing Google search results, is there a way to show only the search results on the vis ...

javascriptjqueryajax

A simple way to initiate an AJAX call once the page has completed loading is by using the `window.location.href` as the

I encountered an issue with my event listener setup function navBtn() { $('#navBtn').on('click', (event) => { window.location.href = 'someotherfile.html'; myAJAXrequest(); }) } The problem I'm facing is that ...

javascriptjqueryhtmlajaxdom

Creating a dynamic table based on selected dropdown option

I need to create a dynamic table of questions depending on the user's selection from a dropdown menu. When the user chooses a category, I want to pass that information to an API using the GET method. My controller is built using AngularJS. However, I ...

javascripthtmlangularjs

Strategies for disabling middle mouse button default behavior in Vue

When I use @click.middle.stop.prevent="test", the default scroll wheel still shows up despite it detecting the middle mouse click and calling my function. Is there a way to prevent this from happening? ...

javascriptvue.js

The art of Vue JS displaying content

Learning how to make API requests using axios has greatly improved my ability to retrieve data in a client-side container and display it in my component template. It's been quite effective so far. Having worked with twig before, I can't help ...

vue.js

Navigating through Index in #each in emberjs

Take a look at the code provided below: http://jsbin.com/atuBaXE/2/ I am attempting to access the index using {{@index}}, but it doesn't seem to be compiling. I believe that handlebars should support this feature: {{#each item in model}} {{@index} ...

javascriptember.jshandlebars.js

Retrieving information and implementing condition-based rendering using React's useEffect

I am currently developing a MERN stack application that retrieves information regarding college classes and presents it in a table format. The CoursesTable.js component is structured as follows: import React, { useState, useEffect } from 'react'; ...

javascriptreactjsapiaxiosuse-effect