Currently, I am experimenting with a Vue application that requires users to upload an image to Firebase. After the image is successfully uploaded, it should be displayed within an img tag in the template.
The issue I am encountering is retrieving the uploaded images and displaying them properly within the application. I have tried implementing a method from Stack Overflow, but it doesn't seem to work for me.
I also looked through various tutorials, but they mainly focus on the uploading process rather than the display afterwards.
Is there anyone who could provide some assistance?
UPDATE:
I made progress by changing the v-for attribute from file to imgURL, which allowed me to preview the uploaded image. However, I am still facing challenges.
Despite seeing the image preview when I click the upload button (albeit 130 times), it disappears upon page refresh as it is not being saved in the template.
<template>
<div>
<h2>image upload</h2>
<input type="file" @change="uploadImage" value="upload" id="fileButton" ref="myFiles">
<div class="image_section_content" fluid v-for="files in file" :key="files.id">
<b-img :src="this.imgURL" fluid alt="Responsive image"></b-img>
<progress max="100" :value="value" id="uploader">0%</progress>
</div>
</div>
</template>
<script>
import db from '@/firebase/init'
import firebase from 'firebase'
export default {
name: 'ImageUpload',
data () {
return {
value: 0,
fileButton: document.querySelector("#fileButton"),
file: [],
imgRef: null,
imgURL: null
}
},
methods: {
uploadImage(e){
//get file
this.file = this.$refs.myFiles.files[0]
console.log(this.file)
//create storageref
let storageRef = firebase.storage().ref('images/');
//save image reference
this.imgRef = storageRef.fullPath;
//upload file
let task = storageRef.put(this.file);
task.on('state_changed', (snapshot) => {
let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
this.value = percentage;
snapshot.ref.getDownloadURL().then(
(DownloadURL) => {
this.imgURL = DownloadURL;
console.log(this.imgURL)
}
)
})
},
// Output image
mounted() {
const id = this.$route.params.id;
const storageRef = firebase.storage().ref('images/');
storageRef.get().then(doc => {
if (doc.exists) {
console.log(doc.data())
this.imgURL = doc.data().imgURL
} else {
console.log('no data')
}
}).catch(err => {
console.log(err)
})
}
}
}