Событие onError не работает должным образом

Question

У меня очень странная ситуация, и я никак не могу ее решить.

const handleImageError = e => {
    e.target.onerror = null;
    e.target.src = 'factory2.svg';
    e.target.width = 45;
    e.target.height = 41;
};

items.map(item => {
   if(item.data) {
       <img src={`${item.data}?size=20`} onError={handleImageError} />
   } else {
       <Logo styleName="defaultIconLogo" width={25} height={20} />
   }

}) 

Я обрабатываю ошибки изображения с помощью вышеуказанной функции и предоставляю изображение другого источника (factory.svg) и размеры в случае ошибки. У меня есть ситуация, когда изображение загружается, а также имеет ширину и высоту, заданные из errorHandler. Я думаю, что это не удается загрузить изображение в первый раз, а затем onError вызывает и изменяет размеры, и в конце концов, он загружается успешно. Если он загружается в конце, то я не хочу иметь ширину и высоту на изображении. Пример src: https://logo.clearbit.com/op.fi?size=20. Проблема состоит в том, что когда он загружает изображение из входящего источника, его размеры уже связаны, но когда срабатывает errorHandler, он переопределяет размеры изображения и дает им width='45' и height='41'. Мне нужны только эти размеры для изображения, когда исходный URL не работает

Answer 1

Еще раз проверьте ваш код, я думаю, что некоторые вещи пропущены в вашем коде

const handleImageError = e => {
    e.target.onerror = null;
    e.target.src = 'factory2.svg';
    e.target.width = 45;
    e.target.height = 41;
};

items.map(item => {
   if(item.data) {
// the image source is like path of the image right here you are assigning size value  
       <img src={`${item.data}?size=20`} onError={handleImageError} />
//here your are using conditional statement right where you close properly the conditional statement should be like condition==true?true:false
   } else {
       <Logo styleName="defaultIconLogo" width={25} height={20} />
   }

})