Хм... Если я вас правильно понял, то ваша проблема в том, что браузер вставляет ваш фрагмент кода
"<img src="+img+" />" как картинку, а не как код этой картинки. Далее исхожу из того, что это ваша проблема. Если нет - попробуйте переформулировать вопрос с читого листа.
Ниже есть 5 способов решения этой проблемы (каждое отмечено комментарием// Решение №), а пока предлагаю разобраться почему так происходит:
// Здесь jquery парсит конструкцию и вставляет ее как HTML node.
// Причем вставляет он в итоге 2 тега: img и br
$('<img src="' + img + '"></br>').appendTo('.body');
Нам нужно сказать браузеру:
вставь это как текст
Для этого есть говорящие свойство .textContent -
https://developer.mozilla.org/ru/docs/Web/API/Node...
Также есть метод jQuery: text() -
api.jquery.com/text/*
* это просто перепишет все
* содержимое в цикле, в итоге в конце
* останется только одна запись
*/
$('.body').text('<img src="' + img + '"></br>')
// можно попробовать так:
$('.body')[0].textContent += '<img src="' + img + '"></br>'
/*
* это не лучшее решение,
* потому как потеряется вся разметка
* для остальной части страницы,
* но это приемлимо (не считая оверхеда)
* если весь текст лежит в одном блоке:
*/
$('.img-links')[0].textContent += '<img src="' + img + '"></br>'
// тем не менее, не лучший подход на мой взгляд
Можно собрать все фрагменты кода и вставить один раз:
...
// Решение 1
success: function(data) {
var parts = [];
data.response.forEach(function(item) {
var img = item.size;
(!(img)) ? img = item.src_big : img; // проверяем, есть ли самое большое разрешение у фотографии
parts.push('<img src="' + img + '"></br>');
});
$('.img-links').text(parts.join(''));
}
...
Здесь вроде все ясно. Зайдем с другой стороны:
Если бы я захотел изначально показать на странице текст вида
<img src="http://my.awesome.link">,
то использовть js было бы неудобно. Как я могу сказать браузеру "не превращай это в DOM"?
Я вижу 2 подхода:
- расположить этот текст в специальном теге
htmlbook.ru/html/xmp (или можно даже в )
- за
escape'ить служебные символы:
"<" -> "<", ">" -> ">"
1) подход:
...
// Решение 2
$('<xmp><img src="' + img + '"></xmp>').appendTo('.body');
// пожалуй, один из самых простых способов
...
2) подход:
...
$('<img src="' + img + '">').appendTo('.body'); // не сработает
// потому что jQuery не умеет вставлять текстовые ноды
// или избегает этого, вместо этого вставится первый валидный тег
// это можно решить - ввести контейнер:
// Решение 3
$('<span><img src="' + img + '"></span><br>').appendTo('.body');
...
Можно ли избежать писания в ручную этих страшных
< / >?
Можно!
Используя js-функцию для эскейпинга: например отсюда
stackoverflow.com/questions/5499078/fastest-method...
Но тут скорее напрашивается другое решение, близкое к тому, с чего мы начали:
Можно использовать .textContent / .text() - чтобы за нас эскейпил браузер / jQuery:
...
// Решение 4
$( $('<span/>').text('<img src="' + img + '"><br>') ).appendTo('.body');
...
И еще одно весьма изящное решение, которое я, надо признаться подсмотрел на StackOverflow (
stackoverflow.com/questions/6588630/jquery-append-text ):
Мы можем сами сказать браузеру, что нам нужна текстовая node и передать ее в jquery:
...
// Решение 5
$('.body').append(document.createTextNode('<img src="' + img + '">'));
