I am developing a web frontend using VueJs for the ui part and a python flask server to provide data.
Communication between the two works with axios.
One main task of the frontend is to display images (one at a time, but with high frequency).
The images are provided via zmq. The VueJs makes a request to the flask server every sencond (required are 300ms) to get the newest image. The timer is set in the onMounted of App.vue.
When I restart everything, the frontend displays the images for a few seconds, then just stops. There is no load event from the image control anymore.
Is this a problem with VueJS? Or with the browser? The browser I am using is Google Chrome. Is there a better way to load large image sequences with high display frequency?
This is the python code:
@app.route('/img.jpg')
def image():
while not socket.poll(10000, zmq.POLLIN):
continue
thumbnail = socket.recv(zmq.NOBLOCK)
arr = np.frombuffer(thumbnail, dtype=np.uint8)
img = np.reshape(arr, ( 2048, 1536,4))
from PIL import Image as im
data = im.fromarray(img)
th = io.BytesIO()
data.save(th, "JPEG")
th.seek(0)
return flask.Response(th, mimetype='image/jpeg')
and in my frontend code
the image store
const imageRoute = "img.jpg";
export const useImageStore = defineStore(
'image',
() => {
const imgUrl = ref("");
const imageBaseUrl = axios.defaults.baseURL + imageRoute;
function updateImageData() {
axios.get(imageRoute)
.then(() => {
imgUrl.value = imageBaseUrl + "?" + new Date().getTime();
})
.catch((err) => {
console.error(err);
imgUrl.value = "";
});
}
return {
updateImageData,
imgUrl
}
})
and the vue file:
<script setup>
import {useImageStore} from "../stores/image";
const imageStore = useImageStore();
function triggerRefresh() {
console.log("refresh triggered by load event!")
}
</script>
<template>
<main>
<div class="container">
<div class="row">
<div class="col-md-5 px-1">
<img alt="Grapes" class="rounded w-100 img-thumbnail" :src="imageStore.imgUrl" @load="triggerRefresh"/>
</div>
<div>
<div>
</main>
</template>