Как загрузить изображение из БД через ajax методом POST?

Question

[BanaBayana]

Здравствуйте!

Подскажите, пожалуйста, как загрузить картинку из БД в html код через ajax?

Вот в таком виде запрос отрабатывается без проблем:

$('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">');

Но как сделать то же самое через такой запрос:

$.ajax({
		url: 'php/getDepImage.php',
		type: 'POST',
                data: {param: selectedID},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
		console.log(XMLHttpRequest);
		console.log(textStatus);
	        console.log(errorThrown);
		},								
		dataType: "json",
		success: function(data){
                }
            });

И вот в случае успешной передачи данных как прописать вставку этих самых данных в тег img?
Если запустить отдельно файл getDepImage.php, который запрашивает изображение из БД, то в html коде отображаемой страницы полученные данные уже встроены в тег img. Кажется логичным прописать в success: function(data){ $('#depImage').html(data); } Но такая форма не работает.

Answer 1

[Роман Сохарев]

Я смотрю, и просто не понимаю: причем тут аякс?
Подгрузка любой картинки по аттрибуту SRC - само по себе асинхронный запрос. Зачем запихивать в аякс то, что и так асинхронно?

Answer 2

[Viktor Vsk]

var event = 'click'; // hover, keydown .. 
var getImage = function( selectedID ) { $('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">'); }

$('#trigger').on(event, getImage( selectedID ));

Answer 3

[Сергей Сова]

У тебя ошибка в коде в:
data: {param: selectedID},
ты вместо id написал param
Гугли в сторону base64

Answer 4

[BanaBayana]

В приложении нужно будет выбирать из списка подразделение. После чего из базы данных подтягиваются ряд показателей по работе этого подразделения и в том числе картинка. Можно выбрать следующее подразделение и из БД подтянутся другие показатели и другой символ. Не представляю, как это сделать через src

Comments

[Роман Сохарев]

У Вас есть апи которое возвращает ссылку на картинку или саму картинку по id подразделения?

[Роман Сохарев]

php/getDepImage.php?id=(какой-то айди) это сама картинка?

Answer 5

[BanaBayana]

Благодарю, я попробую применить Ваш код. Но сейчас пытаюсь представить запрос именно в виде:

$.ajax({
		url: 'php/getDepImage.php',
		type: 'POST',
                data: {param: selectedID},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
		console.log(XMLHttpRequest);
		console.log(textStatus);
	        console.log(errorThrown);
		},								
		dataType: "json",
		success: function(data){
                }
            });

Не важно post/get Сделать это я пытаюсь, чтобы отследить поступление (или непоступление) нового изображения из БД. Так как не для каждого подразделения создан символ. Нужно чтобы в случае его отсутствия, можно было заменить пустой пришедший img изображением-заглушкой. Вот в предполагаемой выше функции я и хочу отследить пришло изображение или нет.

Answer 6

[BanaBayana]

Пыталась и с работающим кодом это сделать

$('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">');

Прописать условие if, но не смогла определить значение значение приходящего пустого изображения. Смотрела value приходящих в div изображений $('#depIcon').value, но что "пустой" картинки, что у "заполненной" данное значение undefined. Кроме как отследить возвращение данных в success: function(data){ } идей не приходит. Возможно Вы знаете, как реализовать эту проверку?

Comments

[Роман Сохарев]

Оу! Ну Вы бы сразу с этого начали. Я когда-то делал нечто подобное. Не ручаюсь за работу кода, но вектор взмахов лопаты я Вам задать могу:

[Роман Сохарев]

чертов парсер... оформлю отдельно

Answer 7

[Роман Сохарев]

<img src="some.png" onerror="setDefaultSrc(e)">
<script>
setDefaultSrc(e){
$(e.target).attr({src:"default.png"});
}
</script>

за работу кода не ручаюсь, но мысль я думаю ясна.

Comments

[Роман Сохарев]

а еще правильнее, подобные вопросы на стороне сервера решать.

Answer 8

[BanaBayana]

Ясна. Попробую применить

Answer 9

[BanaBayana]

В данном виде код, действительно, не отрабатывает. Но примененное в нем "onError" просто спасло. Именно с его помощью смогла отловить "пустые" изображения, пришедшие из базы данных. И тогда уже прописать вставку картинки-заглушки. Получилось следующее:

Запрос картинки:

$('#depSymbol').html('<img src="php/getDepImage.php?id='+selectedID+'" onError="setDefaultSrc()">');

Функция setDefaultSrc():

function setDefaultSrc(){
   $('#depSymbol').html('<img src="images/somepicture.png">');
};

Благодарю Вас.

Comments

[Viktor Vsk]

Можно так же использовать вариант:

<img src="php/GetImage.php" onerror="this.src='img/default.png' />

[Viktor Vsk]

Такой вариант вместо решения на стороне сервера помогал, когда в базе хранилось изображение, а реально оно отсутствовало, но нужно было срочно "привести к нормальному виду"

[BanaBayana]

В Вашем варианте даже оптимальней свыглядит