ajaxリクエストの後に、PNG base64をhtmlでエンコードしました。

Question

私は現在解決できない問題に直面しています。

私はjsonオブジェクトで速度テストをトリガし、データとbase64でエンコードされたイメージを返すdjangoアプリを持っています。 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=" 
     } 
    ] 
} 

Answer 1

2つのこと：あなたが唯一の画像の最後の画像を見るよう

1. あなたのコードでは、画像を上書きアレイ。
2. サンプルJSONの最後のイメージが破損している可能性があります。私はあなたがplunkerでコアの働きを見ることができます

他方がうまくレンダリングされた画像の順序（水平定規の画像）を切り替えたときにhttp://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" 
     } 
    ] 

編集：ために へすべての画像を追加するには、htmlの代わりにappendを使用します。
更新plunkr：http://plnkr.co/edit/v6cR9k9FK6iq1rNbCbVu?p=preview

Answer 2

最後に、src属性を空にして静的なHTMLを作成して問題を解決します。私のjqueryはid（image0、image1、image2、image3）をそれぞれ取得するsrc属性を埋めます。私が知っている最良の選択ではありませんが、私は本当に良いWeb開発者ではありません。 私にお答えいただきありがとうございます！ :)