String64 for VueJS image

Question:

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= with the variable that contains the base64 string or does it need some treatment 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]
      })
    }
  }
}

Answer:

Theoretically, just put the variable. It depends on how the image is coming to you, but at first just replace the variable.

Scroll to Top