通过socket.io事件设置后如何更改图像src？

Question

Using socket.io, I'm pushing images from a server to the client using base64 encoded strings:

socket.on('send_picture', function (data){
    socket_data = (socket_data + data);
    document.getElementById('imgid').src = socket_data
})

How can I reset the src of 'imgid' at the next socket.io event? It works fine one time, but then won't display new images until I refresh the page

Answer 1

I've found that the most reliable way to load new image content is to create a new image element each time and replace the prior image object with the new one. You could do that like this:

socket.on('send_picture', function (data){
    socket_data = socket_data + data;
    var oldImg = document.getElementById('imgid');
    var newImg = new Image();
    newImg.src = socket_data;
    newImg.id = 'imgid';
    oldImg.parentNode.replaceChild(newImg, oldImg);
});