Artem3677
@Artem3677
Учусь

Загрузка картинок через асинхронные коллбэки в JavaScript?

Необходимо асинхронно загрузить картинку из папки на компьютере. В коде предусмотрена возможность: если картинка не загружается, в консоль должна выбрасываться ошибка. Но в приведенном мною коде данный
if (!onerr) {
	err = null;
} else {
	err = 'Error loading image'; 
}

не срабатывает если я указываю имя не существующей картинки, а при указании правильного имени картинка грузится. Как можно исправить код чтоб данная ошибка появлялась в консоли при указании не существующей картинки? Вот код:
function loadImage(url, callback) {
	setTimeout(function() {
		let image = document.createElement('img');
		image.src = url;
		
		let err;
		let onerr = image.addEventListener('error', function() {
			console.log('Error loading image'); // текст ошибки
		});

		if (!onerr) {
			err = null;
		} else {
			err = 'Error loading image'; 
		}
		
		callback(image, err);
	}, 1000);
}

loadImage('/home/artemiy/JS/5.jpeg', function(image, err) {
	if (!err) {
		document.body.append(image);
	} else {
		console.log('Произошла ошибка: ' + err);
	}
});
  • Вопрос задан
  • 506 просмотров
Пригласить эксперта
Ответы на вопрос 1
Vindicar
@Vindicar
RTFM!
JS на странице вообще-то не может обращаться к произвольным файлам на машине клиента - иначе сайты бы брутили важные пути к файлам, чтобы их скопировать и отослать на сервер.
JS может обращаться только к файлам, которые пользователь поместил в поле выбора файла, или к файлам, доступным в Сети по URL (с поправкой на возможный контроль origin).

По идее, ты можешь попробовать обращаться по относительному пути, а не по абсолютному - если скрипт запускается из сохранённого HTML-файла, то он может суметь это сделать, но вроде там тоже есть ограничения на путь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы