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

Ссылка скопирована
JavaScript
1 ответ

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

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

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); 	} });

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); } });

Дополнительно:

3.6, 3.8

  • Поместите код пожалуйста в тег
  • тебе надо сначала повесить событие ошибки, а потом уже указывать src и дождаться у image , complete свойства, когда оно будет true, либо через промисы либо через async await, или указать событие onload/load

    https://developer.mozilla.org/en-US/docs/Web/API/H...

    • Ответы:

    JS на странице вообще-то не может обращаться к произвольным файлам на машине клиента - иначе сайты бы брутили важные пути к файлам, чтобы их скопировать и отослать на сервер.
    JS может обращаться только к файлам, которые пользователь поместил в поле выбора файла, или к файлам, доступным в Сети по URL (с поправкой на возможный контроль origin).

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

    • JS на странице вообще-то не может обращаться к произвольным файлам на машине клиента

      А какое отношение это имеет к вопросу автора?

    • WbICHA, ну я просто зацепился за фразу "загрузить картинку из папки на компьютере" и за путь /home/artemiy/JS/5.jpeg, который выглядит как локальный путь. Хотя вообще да, это может быть путь относительно корня сайта.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Кирилл JS Ответ

    Для загрузки изображений через асинхронные коллбэки в JavaScript, вы можете использовать функцию FileReader API. Это позволяет загружать изображения с локального компьютера пользователя и отображать их на веб-странице.

    Вот пример кода на JavaScript, который показывает как загрузить изображение через асинхронный коллбэк:

    // Создаем input элемент для загрузки файла
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(event) {
  const file = event.target.files[0];
 
  // Создаем FileReader объект
  const reader = new FileReader();
 
  // Устанавливаем коллбэк, который будет вызван после загрузки файла
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  }
 
  // Читаем содержимое файла в формате Data URL
  reader.readAsDataURL(file);
}
 
// Добавляем input на страницу
document.body.appendChild(input);

    // Создаем input элемент для загрузки файла const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function(event) { const file = event.target.files[0]; // Создаем FileReader объект const reader = new FileReader(); // Устанавливаем коллбэк, который будет вызван после загрузки файла reader.onload = function(e) { const img = document.createElement('img'); img.src = e.target.result; document.body.appendChild(img); } // Читаем содержимое файла в формате Data URL reader.readAsDataURL(file); } // Добавляем input на страницу document.body.appendChild(input);

    Этот код создает input элемент для загрузки изображения, добавляет обработчик события onchange, который срабатывает при выборе файла. Затем создается объект FileReader, который считывает содержимое файла в формате Data URL. После этого создается тег img, в который помещается загруженное изображение, и он добавляется на страницу.

    Таким образом, вы можете загружать изображения через асинхронные коллбэки в JavaScript с помощью FileReader API.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Figma Баг с переносом слов в Figma? 0 ответов