String64 for image in Vuejs

Asked

Viewed 668 times

3

I am receiving a database coded string 64 from the database and I want it to render as an image on the screen, my question is:

Just set up the :src= with the variable that contains the string Base64 or needs some treatment before assigning to the :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]
      })
    }
  }
}

image vue.js base64 webcam
  • 1

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

  • That’s what I did, I fetched the string from Mongo and put it in an array, then sent it to the client in the Answer request and only assigned the variable of the desired position of the array. Formulate an answer so that I can accept and that people who also have this doubt can clarify it here... Thank you very much for your help

2 answers

1


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

1

Reopening the topic, I had the same problem, you have to put the value of the variable like this - photo: require("./path.png"). follows a simple example.

           <div class="valign-wrapper">
              <img v-bind:src="item.foto" id="imgContato"/>
              <div class="col s9 m9 l9">
                <a v-if="pend_dadosPessoais > 0" href="#!" class="secondary-content">
                  <span class="new badge blue">pendentes</span>
                </a>
                <span class="black-text truncate">{{item.nome}}</span>
                <p class="truncate grey-text ultra-small">{{item.ultimaMsgn}}</p>
              </div>
            </div>

variable ->

item:[{
          nome: 'Jony Alan',
          numero: '15988195946',
          foto: require('./images/foto1.jpg'),
          ultimaMsgn: "Salve Stackoverflow",
          hora: '15:33',
          alerts: '1',
        },]

Browser other questions tagged image vue.js base64 webcam

You are not signed in. Login or sign up in order to post.