Image Blob URL from already given Image Blob URL

Question

I have a doubt with image blob,is it possible to create an Image blob URL with a given image blob URL? I created a new image blob URL and tried to use it on img tag but it did not work:

    useEffect(() => {
        if (socket.current) {
                socket.current.on("msg-recieve", (msg) => {
                const RecieveBlob = new Blob([msg], { type: 'image/jpeg' });
                const RecieveImageURL = URL.createObjectURL(RecieveBlob);
                console.log("msg recieved is ", msg)
                setArrivalMessage({ fromSelf: false, message: msg })
            })
        }
        setNoImage(false)
    }, [])

In this code, msg is an image blob URL coming from the server and I want to display that image in the page. Therefore, I created new Image blob from it. However, when I use the new Image blob it is not working.

If anybody knows why please help me, Thanks.

Answer 1

If the msg is String you shouldn't wrap that in brackets because it makes it an [String] or Array of strings so try this:

instead of: const RecieveBlob = new Blob([msg], { type: 'image/jpeg' }) ;

write: const RecieveBlob = new Blob(msg, { type: 'image/jpeg' }) ;

PS But I think you can use the blob URL and set it as an image source in the first place, it would work.