title: how to display images pusher real time chat
body: <p>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 </p>
  
  <pre><code>$avatar = 'data:image/png;base64,'. base64_encode( $image );
  $pusher = PusherInstance::get_pusher() ;
  $pusher-&gt;trigger(
      'channel_test',
      'new_comments',
      array('message' =&gt; $message ,'user' =&gt; $data_user),
      $_POST['socket_id']
  );
  echo json_encode(array('message' =&gt; $message,'user' =&gt; $data_user,'avatar'=&gt;$avatar)) ;
  </code></pre>
  
  <p>and then I try to display them using javscript  , </p>
  
  <pre><code>channel.bind('new_comments',function(data){
     $('.chat-widget').append("&lt;div class='row'&gt;\
         &lt;div class='chat_post col-lg-12'&gt;\
          &lt;div class='media'&gt;\
           &lt;a class='pull-left' href='#'&gt;\
                &lt;img class='media-object img-circle' width=30 height=30 src='" + data.avatar +"' alt=''&gt;\
                    &lt;/a&gt;\
                    &lt;div class='media-body'&gt;\
                        &lt;h4 class='media-heading chat-name'&gt;&lt;a href='profile.php?user=" + data.user + "' class='user_profile'&gt;" + data.user + "&lt;/a&gt;\
                            &lt;span class='small pull-right'&gt;12:23 PM&lt;/span&gt;\
                        &lt;/h4&gt;" + data.message + " &lt;/div&gt;\
                      &lt;/div&gt;\
                  &lt;/div&gt;\
                  &lt;/div&gt;\
              &lt;hr&gt;\
  ");
  </code></pre>