Javascript 如何显示图像推送实时聊天

我正在尝试使用pusher使用图像进行实时聊天我找不到任何关于如何使用pusher显示图像的信息我使用BLOB存储图像，但无法在客户端的javascript中显示它们，键入图像出现的消息的人只是查找，但在其他人屏幕上它返回未定义。我没有发布提交javascript，因为它工作正常，只是绑定不好

$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)) ;

然后我试着用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>\
");

channel.bind（'new_comments'，函数（数据）{
$（'.chat小部件'）。追加（“\
\
\
\
\
\
下午12:23\
“+data.message+”\
\
\
\
\
");

如评论中所述，邮件大小超过了10kB的限制。由于这一限制，更好的做法是只通过推送器发送图像的URL，并从服务器提供图像本身。

像现代信使一样，以DB存储到复制图像，一个图像的大小应该非常小（在php中使用像GD这样的图像库），将大小减小到100X100像素左右，并使用模糊过滤器减小大小。 然后将消息另存为BLOB，在数据库中键入。然后您可以使用套接字发送消息，并遵循推送规则

第二个副本不会保存在数据库中，您必须将其存储在存储器中，当收到消息时，用户必须单击预览图像（小尺寸）以根据URL下载它

---

您还可以使用javascript或JQuery在接收消息事件触发后创建自动下载机制。

您的图像有多大？您可能会遇到问题。由于此限制，最好只通过推送器发送图像的URL，并从服务器上提供图像本身。是的，谢谢您解决了我的问题。谢谢老板！太好了，我会把它作为答案贴出来的。