在ajax请求后显示以html编码的PNG base64答案

【问题标题】：Display PNG base64 encoded in html after ajax request在ajax请求后显示以html编码的PNG base64
【发布时间】：2016-10-13 21:19:36
【问题描述】：

我目前面临一个我无法解决的问题。

我有一个 django 应用程序，它触发速度测试并在 json 对象中发送回数据和 base64 编码图像。 ajax 请求请求测试，响应是 JSON。但是我无法在 HTML 中显示图像。

我的 jquery ：

<script>
$(function() {
    $('#chargement').show();
    $(document).load(dynamicTask());

    function dynamicTask() {
        $.ajax({
            type: "POST",
            url: "{% url "rfa.views.dynamicSpeedtest" %}",
            data: {ip: "{{ ip }}", timelength: "{{ timelength }}", interval: "{{ interval }}", bandwidth: "{{ bandwidth }}", jitter: "{{ jitter }}", pktLoss:"{{ pktLoss }}", delay: "{{ delay }}", retransmit: "{{ retransmit }}"},

                success: function(data) {
                    $('#chargement').hide();
                    console.log("success");
                    $.each(data.tab, function(i, obj){
                            $("#resultat> tbody:last").append("<tr> <td> " + obj.Indicateur + " </td> <td> " + obj.Minimum + " </td> <td> " + obj.Moyenne + "</td> <td> " + obj.Maximum + " </td> </tr>");
                    }
                    );
                    $.each(data.images, function(j, img){

                    $('#imageslist').html('<img src="' + img.src + '"/>');


                    }
                    );
                },
                error: function(){
                    $('#chargement').hide();
                    }, 

        })
    }
})

我收到的json：

{
    "tab": [
        {
            "Indicateur": "Bande passante",
            "Maximum": "27.6GB/s",
            "Minimum": "26.9GB/s",
            "Moyenne": "27398800000.0"
        },
        {
            "Indicateur": "Delai",
            "Maximum": "0.0925ms",
            "Minimum":    "0.024ms",
            "Moyenne": "0.0458ms"
        },
        {
            "Indicateur": "Gigue",
            "Maximum": "0.051784 bits/s",
            "Minimum": "0.0100943 bits/s",
            "Moyenne": "0.03211228ms"
        }
    ],
    "images": [
        {
            "src": "data: image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAA4EAAAERCAIAAABKMTXxAAAABmJLR0QA/wD/AP+gvaeTAAAgAElEQVR4nO3de1RU193/8c1FfdA5JiiowAiiTlWcoMYQlDZy0VhWxCSPoG3TPKb5rZV6SYyNsYYkRsRU4yWQ2gQT16okras0qxJTbWgp+a0UTSvWSxmJSMDoGEa5BAaJR1FA9PfH+TkPYS5cPHOGy/v1x2cNZ/Y5swey4nedPfs7XsXFxQIAAADQypUrV3w9PQcAAAAMII2NjWazdTmc7UlhY+PLLL1dUVLS0tHh5eV25ckUZVltbO3To0La2tpEjRzY2NgohFi5cWFdXFxcX98ADDzzyyCNDhw5VRl6+fNnf3//y5csjRoxQTnc4AYenOzzo8PSQkJAvv/xSkqQrV65MmTLl0qVL3ZpnF+3bt09oeR/UZDJNnjxZCOHt7V1bW6tUzbY/YU8OKj4AAAH2SURBVHteXs4+JQwAAOB2Vqv166+/vnTp0pgxYz744APRheqlg/YFqBBixYoVr7zySnV1dXV19e3b/1sSK6Wbj49PW1ubcuTjjz/evHnzyJEjs7Oz22CQAAAAYK38bGRrPZ7OlpAAAAYAD5f9Zde5yBRgcFAAAAAElFTkSuQmCC"
        },
        {
            "src": "data:image/png;charset=utf-8;base64, iVBORw0KGgoAAAANSUhEUgAAA4EAAAERCAIAAABKMTXxAAAABmJLR0QA/wD/AP+gvaeTAAAgAElEQVR4nO3de1Tc9Z3OYrA4i5Dz74wGg0ZmVlDQ8PHzlyxO12X3PNNYHv/932VKTU2VJGnp0qWSJKWlpfnMOXnypOuBWq0OegEAAABQWCf3ZlJAXl5edna2TqdLSUkpLCx0DdJrNC7NDc3B33O4uJi0R3WQVNTUyVJkmVZkqS0tDSfOQsWLKitrY2IiBgwYECAtVIAAABcEcJ/+J133glc1blz50aPHr1169bXXnst8Ad5W716tat4lUoVuHgAAACIS7ke1I8gXu+o/NWTXK8JAACgjEu5HpRGDQAAAJevO/5evPKdLr01AACAkrpjDwoAAICejR4UAAAASqMHBQAAgNLoQQEAAKA0elAAAAAoTWW1Wk+dOvXLL7+EuxIAAAD0Fn2bmpqOHDkS7jIAAADQi/w/vwFWoA2XRrsAAAAASUVORK5CYII="
        }
    ]
}

【问题讨论】：

尝试在 jsfiddle / Plunker 中发布问题并演示您的问题
我尝试过，但即使对于已经工作的部分（从我的 json 的 tzab 部分获取数据），它也不起作用。 link我的问题是显示我以 64 为基数的 json 发送的图片

标签： jquery json ajax django image

【解决方案1】：

我终于通过创建 src 属性为空的静态 html 来解决问题。然后，我的 jquery 填充这个 src 属性，通过 id（image0、image1、image2 和 image3）获取每个属性。这不是我所知道的最佳选择，但我并不是一个很好的网络开发人员。谢谢你回答我！ :)

【讨论】：

【解决方案2】：

两件事：

您的代码会覆盖图像，因此您只能看到图像数组中的最后一张图像。
示例 JSON 中的最后一个图像可能已损坏。当我切换图像的顺序时，另一个渲染得很好（水平标尺图像）

您可以在 plunkerhttp://plnkr.co/edit/v6cR9k9FK6iq1rNbCbVu?p=preview 中查看核心工作原理

"images": [

        {
            "src": "data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAA4EAAAERCAIAAABKMTXxAAAABmJLR0QA/wD/AP+gvaeTAAAgAElEQVR4nO3de1Tc9Z3OYrA4i5Dz74wGg0ZmVlDQ8PHzlyxO12X3PNNYHv/932VKTU2VJGnp0qWSJKWlpfnMOXnypOuBWq0OegEAAABQWCf3ZlJAXl5edna2TqdLSUkpLCx0DdJrNC7NDc3B33O4uJi0R3WQVNTUyVJkmVZkqS0tDSfOQsWLKitrY2IiBgwYECAtVIAAABcEcJ/+J133glc1blz50aPHr1169bXXnst8Ad5W716tat4lUoVuHgAAACIS7ke1I8gXu+o/NWTXK8JAACgjEu5HpRGDQAAAJevO/5evPKdLr01AACAkrpjDwoAAICejR4UAAAASqMHBQAAgNLoQQEAAKA0elAAAAAoTWW1Wk+dOvXLL7+EuxIAAAD0Fn2bmpqOHDkS7jIAAADQi/w/vwFWoA2XRrsAAAAASUVORK5CYII="
        },
        {
            "src": "data: image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAA4EAAAERCAIAAABKMTXxAAAABmJLR0QA/wD/AP+gvaeTAAAgAElEQVR4nO3de1RU193/8c1FfdA5JiiowAiiTlWcoMYQlDZy0VhWxCSPoG3TPKb5rZV6SYyNsYYkRsRU4yWQ2gQT16okras0qxJTbWgp+a0UTSvWSxmJSMDoGEa5BAaJR1FA9PfH+TkPYS5cPHOGy/v1x2cNZ/Y5swey4nedPfs7XsXFxQIAAADQypUrV3w9PQcAAAAMII2NjWazdTmc7UlhY+PLLL1dUVLS0tHh5eV25ckUZVltbO3To0La2tpEjRzY2NgohFi5cWFdXFxcX98ADDzzyyCNDhw5VRl6+fNnf3//y5csjRoxQTnc4AYenOzzo8PSQkJAvv/xSkqQrV65MmTLl0qVL3ZpnF+3bt09oeR/UZDJNnjxZCOHt7V1bW6tUzbY/YU8OKj4AAAH2SURBVHteXs4+JQwAAOB2Vqv166+/vnTp0pgxYz744APRheqlg/YFqBBixYoVr7zySnV1dXV19e3b/1sSK6Wbj49PW1ubcuTjjz/evHnzyJEjs7Oz22CQAAAAYK38bGRrPZ7OlpAAAAYAD5f9Zde5yBRgcFAAAAAElFTkSuQmCC"
        }
    ]

编辑： 为了附加所有图像，请使用 append 而不是 html。
更新 plunkr：http://plnkr.co/edit/v6cR9k9FK6iq1rNbCbVu?p=preview

【讨论】：

嗨！谢谢你的答复。如何更改我的代码以免覆盖我的图像？（即为 JSON 的每个 base64 图像创建一个图像？
你可以使用 jQuery 的 append 代替 html
我已经尝试过了：s 它导致创建带有无效 url 的 img（而 base64 编码的图像是正确的）