Base64图片无法正常显示求助：两种场景仅一种生效

先拆解你的代码里的几个关键问题：

1. setTimeout 用法错误 #

你写的setTimeout("", 3000);完全无效，空字符串不能作为回调函数。同时循环中使用var会触发闭包陷阱，定时器触发时i的值已经是循环结束后的最终值，无法正确遍历每一项。

2. DOM 选择器不完整 #

prependTo('#');里的#后没有指定具体容器ID，jQuery找不到目标元素，生成的img节点无法插入到DOM中。需要替换成页面实际存在的容器选择器，比如#room-list。

3. 重复ID属性违规 #

循环生成的所有img都使用id="host-img"，HTML规范中ID必须唯一，这会导致DOM结构异常，浏览器只会识别第一个带该ID的元素。建议改用class属性，比如class="host-img"。

4. Base64 编码重复问题 #

EJS中justtalk.image.data是Node.js的Buffer对象，调用toString('base64')能正确生成Base64字符串。但前端通过Socket接收的room[i].image.data，如果后端在发送时已经将Buffer转成了Base64字符串（比如JSON序列化时自动处理），前端再调用toString('base64')会对字符串二次编码，直接导致图片数据损坏。

修正后的代码 #

<script>
    const socket = io('/start');

    socket.on("receiveRooms", (room, callback) => {
        // 用forEach遍历，避免闭包问题
        room.forEach(item => {
            // 检查数据类型，避免重复编码
            const base64Str = typeof item.image.data === 'string' 
                ? item.image.data 
                : item.image.data.toString('base64');
            
            // 用class替代重复ID，拼接正确的img标签
            const imgHtml = `<img class="host-img" src="data:image/${item.image.contentType};base64,${base64Str}">`;
            
            // 替换为实际存在的容器选择器
            $(imgHtml).prependTo('#room-container');
        });
    })
</script>

额外检查项 #

• 打开浏览器控制台（F12），查看Socket接收的room数据结构，确认image.data的实际类型：如果是字节数组格式（比如{ type: 'Buffer', data: [123, 45...] }），需要用btoa(String.fromCharCode(...item.image.data))转换为Base64。
• 检查目标容器是否已在页面中渲染完成，避免DOM节点尚未存在时执行插入操作。

内容的提问来源于stack exchange，提问作者jakobheb