Imagen Vue de base64 o ArrayBuffer

Question

Tengo un backend de matraz, que envía una imagen a la interfaz de vue como se describe aquí :

with open('my_image_file.jpg', 'rb') as f:
    image_data = f.read()
emit('IMAGE', {'image_data': image_data})

En la interfaz de vue, la imagen debería mostrarse finalmente en la página web. Supongo que la forma más sencilla sería guardar la imagen de alguna manera en la carpeta estática. Tendría una acción como esta en mi tienda:

const actions = {
  SOCKET_IMAGE (commit, image) {
    console.log("image received")

    /* What needs to be done to save image in 'static/' ?*/

    commit.commit('image_saved')
  }
}

También estoy abierto a formas alternativas de guardar la imagen y renderizarla en la página web. ¿Puedo guardar la imagen directamente en la tienda vuex?

Answer 1

Puede almacenar los datos de la imagen en Vuex

Tienda:

const state = {
  imgData: null
}

Suponiendo que obtiene base64de la API, confirme los datos sin procesar:

commit('SET_IMAGE_DATA', image);

O, si obtiene un ArrayBuffer, conviértalo primero:

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

const imgData = _arrayBufferToBase64(image)
commit('SET_IMAGE_DATA', imgData);

^{ArrayBuffer al método base64 encontrado aquí}

Y utilícelo en su plantilla:

<template>
  <div>
    <img :src="'data:image/png;base64,' + $store.state.imgData" />
  </div>
</template>