我有一個Flask後端，根據這裡的描述，將一張圖片發送給Vue前端：
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
在Vue前端，最終應該會在網頁上顯示這張圖片。我猜最簡單的方法是將圖片保存在靜態資料夾中。在我的store中，我會有一個像這樣的action：
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* 需要做什么来将图片保存在 'static/' 中？*/
commit.commit('image_saved')
}
}
我也樂意嘗試其他儲存圖片並在網頁上渲染的方法。我能直接將圖片儲存在Vuex store嗎？
您可以將影像資料儲存在Vuex中
儲存：
const state = { imgData: null }假設您從API取得
base64，請提交原始資料：commit('SET_IMAGE_DATA', image);或者，如果您取得的是
ArrayBuffer，請先轉換：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轉換為base64的方法here
並在您的模板中使用它：
<template> <div> <img :src="'data:image/png;base64,' + $store.state.imgData" /> </div> </template>