Как отследить ошибку 404 в консоли?

Question

[Павел Сидоров]

Есть вот такой код с комментарием:

$(document).ready(function (){
        var text = '';
	var str = '5858/2';
	str = str.replaceAll("/", "_");
	var i = 1;
	while (i < 12) {
		if (str === null) {
			break;
		}
		//если статус ответ 200, то в переменную text добавить путь
		var img = "https://textileprofy.synology.me:5588/FOTOBANK/JPEG/" + str + "_"+ i +".jpg";
		//иначе при первом статус 404 выход изх цикла break
		i++;
	}
});

Как отследить статус 404? То есть, если по пути "https://textileprofy.synology.me:5588/FOTOBANK/JPEG/" + str + "_"+ i +".jpg" ничего нет.

Пытался использовать fetch и XMLHttpRequest() - ругается на CORS.

Answer 1

[Денис Инешин]

Network tab - Img
Там увидишь как загружаются твои картинки и какую ошибку выдают если нет.

Upd:

// Картинку можно загрузить и с помощью JS
const img = new Image();
img.addEventListener('load', () => {
  // do something
});
img.addEventListener('error', () => {
  // don't do
});
img.src = 'bla bla';

Comments

[Павел Сидоров]

Так увидеть в консоле это я могу.
Мне надо отследить статус 404 и выйти из цикла. Возможно?

[Денис Инешин]

Павел Сидоров, я обновил комменарий, точно так же можно добвать события load и error

[Павел Сидоров]

не понимать.
эту констуркцию я использую в цикле?

img.src = 'bla bla'; - путь до фото

img.addEventListener('load', () => {
var src = this.src; 
  // загрузка успешна 
text += src;
// либо пушим в пустой массив а после цикла его перебираем 
});
img.addEventListener('error', () => {
 //как выйти из цикла??
});

у меня почему то пустые данные

[Павел Сидоров]

Денис Инешин, полный код

$(document).ready(function (){
    var text = '';
    var mass = [];
	var str = '5858/2';
	str = str.replaceAll("/", "_");
	var i = 1;
	while (i < 12) {
		if (str === null) {
			break;
		}
		const img = new Image();
        img.src = "https://textileprofy.synology.me:5588/FOTOBANK/JPEG/" + str + "_"+ i +".jpg";
    	img.addEventListener('load', () => {
          var src = this.src; 
          mass.push(src);
        });
        img.addEventListener('error', () => {
          alert('ошибка');
        });
	i++;
	}
	for (let a = 0; a < mass.length; a++) {
        text += '<div>'+mass[a]+'</div>';
	}
	console.log(text);
});

[Денис Инешин]

Павел Сидоров, src добавляем в конце.

Вы не спешите сразу в цикл всё пихать. Протестируйте вначале на отдельных картинках, поштучно.

[Павел Сидоров]

Денис Инешин,

img.addEventListener('load', () => {
          var src = this.src; 
          // переменная src пустая
});

не понимаю, пытаюсь получить ссылку, которую передали сюда на загрузку, делаю внутри console.log(this); и выдает ошибку

[Денис Инешин]

Павел Сидоров, еще раз посмотрите на мой пример.

[Павел Сидоров]

Денис Инешин, я вижу. вы написали в примере, что при успешной загрузке "сделай чего нибудь" - Я могу вызвать функцию, могу вызвать алерт, но я не понимаю, почему я не вижу путь до этой фотки и я не понимаю, почему я не могу добавить в ранее объявленный массив любое значение.

[Денис Инешин]

Ну для начала в стрелочной функции `this` вообще нет.

Далее, просто рядом с картинкой создайте новую переменную.

const img = new Image();
const imgSrc = 'bla bla';
img.addEventListener('load', () => {
  // do something
  console.log('this one works: ', imgSrc);
});
img.addEventListener('error', () => {
  // don't do
});
img.src = imgSrc;

[Павел Сидоров]

Денис Инешин, переменная imgSrc у меня по вашему примеру пустая

[Павел Сидоров]

Проблема то кстати осталась
Консоль разработчика, все равно показывает ошибку 404

[Денис Инешин]

Павел Сидоров, https://jsfiddle.net/IonDen/614c9h57/ - всё прекрасно работает

[Павел Сидоров]

Денис Инешин, сервис не алло =)

[Денис Инешин]

Павел Сидоров, впн нету?

Тогда код:

const img = new Image();
const imgSrc = 'https://imageio.forbes.com/specials-images/imageserve/5d35eacaf1176b0008974b54/2020-Chevrolet-Corvette-Stingray/0x0.jpg?format=jpg&crop=4560,2565,x790,y784,safe&width=960';

img.addEventListener('load', () => {
  // do something
  console.log('this one works: ', imgSrc);
  
  document.body.append(img);
});

img.addEventListener('error', () => {
  // don't do
});

img.src = imgSrc;


// -----


const img2 = new Image();
const imgSrc2 = 'https://imageio.forbes.com/specials-images/imageserve/fdfdfd/2020-Chevrolet-Corvette-Stingray/0x0.jpg?format=jpg&crop=4560,2565,x790,y784,safe&width=960';

img2.addEventListener('load', () => {
  // do something
  console.log('this one works: ', imgSrc2);
  
  document.body.append(img2);
});

img2.addEventListener('error', () => {
  // don't do
  console.log('this one NOT')
});

img2.src = imgSrc2;

[Павел Сидоров]

Денис Инешин, скрипт работает правильно. но дальше при использовании консоли мы видим, что есть ошибка 404 . как от нее избавиться? в этом основная часть вопроса.

[Денис Инешин]

Павел Сидоров, тааак, а причем тут консоль? Вы все равно можете видеть в консоли все внешние загружаемые ресурсы и как они загружаются. В консоли вы можете видеть и фильтровать логи. Во вкладке network всегда видно все загружаемые ресурсы и их статус.

К тому же какая разница? Обычные пользователи не видят консоль никогда.

[Павел Сидоров]

Денис Инешин, обычные пользователи да. Я быи забил на этот момент. Не знаю , как с точки зрения роботов и поисковых систем.
Никто не может ответить, влияет это или нет