JavaScript通过MQTT接收图片修改img标签src属性不生效问题求助

• DOM选择逻辑错误
  document.getElementsByClassName()返回的是匹配类名的所有元素组成的类数组集合（HTMLCollection），并非单个DOM元素，直接给集合设置.src属性不会生效，且由于JS允许为对象自定义新增属性，该操作不会触发控制台报错。
• 二进制转base64逻辑错误
  你接收到的r_message.payloadBytes是图片的原始二进制数据，使用TextDecoder('utf8')解码属于逻辑错误：UTF-8是文本编码规则，强行解码二进制图片数据会造成数据不可逆损坏，最终生成的base64字符串无效，无法正常渲染为图片。

1. 修正DOM选择逻辑：要么给img标签设置id属性，用getElementById获取单个元素；要么直接取类数组集合的第一个元素。
2. 修正二进制转base64的逻辑，直接处理原始二进制数据，不要用文本解码器。

修改后的完整代码如下：

function onMessageArrived(r_message) {
    console.log("message here")
    // 取匹配类名的第一个元素
    document.getElementsByClassName('img_importer')[0].src = "data:image/png;base64," + convert(r_message.payloadBytes);
}

function convert(buffer) {
    // 直接将二进制缓冲区转为base64，不经过UTF-8文本解码
    return btoa(String.fromCharCode(...new Uint8Array(buffer)));
}

补充验证点：如果MQTT传输的图片格式不是png，需要将data URI中的image/png替换为对应的实际格式（如image/jpeg）。

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