Updating the src attribute of the img tag in HTML results in overlapping with old images

I continuously send binary streams of images from the backend server to the frontend HTML page. After receiving the binary stream, the frontend HTML page uses the URL.nestObjectionURL function to convert it and directly applies it to the src attribute of the img tag, just like this

socket.onmessage = function (event) {
    document.getElementById('img').src = URL.createObjectURL(event.data)
}

I continuously display new images transmitted from the backend by updating the src attribute of the img tag
But new images will always be displayed overlaid with old images

This phenomenon is very strange. As long as my perspective remains in the current window, it will cause this. Once my perspective leaves the current page, it will return to normal. It seems that this situation occurs when I just look at this image. This is what happens when my perspective leaves the current page

Oh my god, I’m really going to crash. I’m a beginner in HTML and I can’t find any explanation for this phenomenon online. Can you please help me