How to convert blob data into an image in JavaScript?

Question

I'm trying to transfer an image through a WebSocket and then display it on a webpage. Image is sent as a blob.

websocket.onmessage = function (event) {
    document.getElementById("foto").src = "data:image/png;event.data)";
};

I'm getting this error:

Failed to load resource: net::ERR_INVALID_URL

Answer 1

It should be

document.getElementById("foto").src = "data:image/png;" + event.data;

Assuming event.data is the actual data as a string.