how to display images pusher real time chat

Question

im trying to use images for a real time chat using pusher i cant find anything on how to display images using pusher i store the images using BLOB but cant display them in the javascript on the client side, the person who types the message the image comes up just find but on the other person screen its coming back undefined. i didnt post the submit javascript because its working fine just the bind is not good

$avatar = 'data:image/png;base64,'. base64_encode( $image );
$pusher = PusherInstance::get_pusher() ;
$pusher->trigger(
    'channel_test',
    'new_comments',
    array('message' => $message ,'user' => $data_user),
    $_POST['socket_id']
);
echo json_encode(array('message' => $message,'user' => $data_user,'avatar'=>$avatar)) ;

and then I try to display them using javscript ,

channel.bind('new_comments',function(data){
   $('.chat-widget').append("<div class='row'>\
       <div class='chat_post col-lg-12'>\
        <div class='media'>\
         <a class='pull-left' href='#'>\
              <img class='media-object img-circle' width=30 height=30 src='" + data.avatar +"' alt=''>\
                  </a>\
                  <div class='media-body'>\
                      <h4 class='media-heading chat-name'><a href='profile.php?user=" + data.user + "' class='user_profile'>" + data.user + "</a>\
                          <span class='small pull-right'>12:23 PM</span>\
                      </h4>" + data.message + " </div>\
                    </div>\
                </div>\
                </div>\
            <hr>\
");

Answer 1

As mentioned in the comments, message sizes were over the 10kB limit. Due to this limit, it is better practice to only send the URL of the image via Pusher, and serve the image itself from your server.