Question

假设在数据库数据库中，我想要包含字母和图像的对象，我想在HTML中显示它们。

我认为最有效的方法是在base64中对图像进行编码，并将其作为<img>元素添加到字符串中。

因此，它看起来像这样：

<img width=''766'' height=''266'' src=''data: image/png; base64, Z29vZCBqb2IgZGVjb2Rpbmc=''>

要检索并显示此信息，请使用以下代码：

function sendMsg(msg) {
    var xhttp = new XMLHttpRequest();
    var params = "msg=" + String(msg) + "&csrfmiddlewaretoken={{ csrf_token }}"
    xhttp.open("POST", "/mtmessage/", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.setRequestHeader("X-Requested-With", "XmlHttpRequest");
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var respo = JSON.parse(this.responseText)
            document.getElementById("response_text").insertAdjacentHTML('beforeend', String(respo.rsp));
        }
    }
    xhttp.send(params);
}

第一个问题是，文本在Ajax中加载时间太长，我不明白为什么会发生这种情况，也许JSON解析会降低它的速度？

第二个问题是图像没有显示，HTML仍将它视为字符串而不是DOM对象，即使我尝试insertAdjacentHTML方法。

最合适的方法是什么？我应该以不同的方式传递这些信息吗？

将包含图像的文本加载到HTML中的最有效方法

0 个答案: