Vue version

3.2.20

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-exy3xk?file=src/components/ImgStrm.vue

Steps to reproduce

Happens on Windows 11, either Edge or Chrome. I am actually running mjpeg stream. stops showing stream but the request is still running in network tab

What is expected?

The image tag is remounted with image requests coming in and renders in browser

What is actually happening?

Does not change rendered image/frame, looks like stuck, but backend requests is fine.

System Info

Windows 11, Edge: 106.0.1370.47, Chrome 106.0.5249.119

Any additional comments?

Does not happen in Windows 10, same browser versions.

Edit: fix some info

Not sure why stackblitz is not showing the code... :/

<template>
  <img ref="myImg" src="" width="200" height="200" />
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  name: 'ImgStrm',
  setup() {
    const stream = ref(null);

    onMounted(() => {
      // normally the src is an mjpeg stream
      myImg.value.src = './assets/vue.svg';
    });

    onBeforeUnmount(() => {
      myImg.value.src = '';
    });
    return {
      stream,
    };
  },
};
</script>

Avoid manual dom manipulation, use v-bind as described in docs.

Remember to use the forum or the Discord chat to ask questions!