В настоящее время я сталкиваюсь с проблемой, которую я не могу решить.
У меня есть приложение django, которое запускает тест скорости и отправляет обратно данные и кодированное изображение base64 в объекте json. Запрос 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="
}
]
}
Я, наконец, решу проблему, создавая статический html с атрибутом src empty. то мой jquery заполнит этот атрибут src, получая каждый по id (image0, image1, image2 и image3). Это не лучший выбор, который я знаю, но я не очень хороший веб-разработчик. Спасибо, что ответили мне! :)
Две вещи:
Вы можете увидеть основные работы в плункере 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"
}
]
edit: Чтобы добавить все изображения, используйте append
вместо html
.
обновленный plunkr: http://plnkr.co/edit/v6cR9k9FK6iq1rNbCbVu?p=preview
append
вместо html