如何检测AJAX返回的Boolean值并实现图片条件渲染？

当前代码会给所有消息强制生成<img>标签，哪怕没有图片源，导致聊天框出现无效图片占位。要解决这个问题，只需要在构建消息HTML结构时，根据model.media的布尔值判断是否添加图片标签即可。

修改后的完整JS代码 #

$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            type: 'GET',
            url: "/checkview",
            success: function go(response) {
                console.log(response);
                $("#display").empty();
                for (var model of response.models_to_return) {
                    // 先构建消息的基础内容（用户ID、房间、时间）
                    var temp = "<div class='container darker'><b>" +
                        model.user_id + "</b><p>" +
                        model.room + "</p><span class='time-left'>" +
                        model.datetime + "</span>";
                    
                    // 仅当media为true时，添加图片标签
                    if (model.media === true) {
                        temp += "<img src='../static/" + model.mediasrc + ".png'>";
                    }
                    
                    // 闭合消息容器
                    temp += "</div>";
                    
                    $("#display").append(temp);
                }
            },
            error: function(response) {
                //alert('An error occured')
            }
        });
    }, 1000);
})

关键修改说明 #

• 将原来硬编码的<img>标签拆分出来，通过if (model.media === true)进行条件判断
• 只有当消息对象的media属性为true时，才会拼接图片标签的HTML代码
• 给图片的src属性添加了单引号，避免潜在的HTML语法问题

这样修改后，没有媒体内容的消息就不会生成无效的<img>标签，聊天框里也就不会出现无效图片占位了。

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