I'm getting a base64 encoded string from the database and I want it to render as an image on the screen, my question is:
Just set the :src=
to the variable that contains the base64 string or need some processing before assigning it to :src=
??
<template>
<q-layout>
<q-toolbar color="light-blue-10">
<q-toolbar-title>Webcam</q-toolbar-title>
</q-toolbar>
<webcam ref="webcam"></webcam>
<img :src="img" style="width: 640px;height: 480px;"/>
<q-btn color="light-blue-10" @click="photo">
<q-icon name="photo camera" />Capturar
</q-btn>
<q-btn color="light-blue-10" @click="enviar"><q-icon
name="send"/>Enviar Foto</q-btn>
<q-btn color="light-blue-10" @click="verFoto"><q-icon
name="person"/>Buscar Foto</q-btn>
<img :src="imagem" style="width: 640px; height: 480px;"/>
</q-layout>
</template>
<script>
import {
QLayout,
QToolbar,
QToolbarTitle,
QBtn,
QIcon
} from 'quasar'
import Webcam from 'vue-web-cam/src/webcam.vue'
import axios from 'axios'
export default {
components: {
QLayout,
QToolbar,
QToolbarTitle,
Webcam,
QBtn,
QIcon
},
data () {
return {
img: null,
imagem: null
}
},
methods: {
photo () {
this.img = this.$refs.webcam.capture()
},
enviar () {
let foto = this.img
console.log(foto)
axios({
method: 'post',
url: '/server/foto',
params: foto
}).then((response) => {
console.log(response.data)
})
},
verFoto () {
let self = this
axios({
method: 'post',
url: '/server/verfoto',
params: 'foto'
}).then((response) => {
console.log(response)
self.imagem = response.data[0]
})
}
}
}