Резервное изображение с условием ошибки в Ionic 2 Angular 4
У меня есть тег, содержащий источник изображения. Я также написал случай ошибки, если изображение выходит из строя. Ниже мой код
<div class = "column thumbnail"><img class = "posterThumbNail" [src] = "item.imageUrl" onError = "this.src='./assets/imgs/placeholder.png';" /></div>
Могу ли я иметь условие внутри этого onError, чтобы в зависимости от категории эскизов я мог отображать разные изображения-заполнители по отношению к категории. Ожидая чего-то вроде,
<div class = "column thumbnail"><img class = "posterThumbNail" [src] = "item.imageUrl" onError = "errorPlaceHolder" /></div>
<ng-template #errorPlaceHolder>
<div [ngSwitch] = "item.category">
<template [ngSwitchCase] = "foo">
<div>./assets/imgs/placeholderFoo.png</div>
</template>
<template [ngSwitchCase] = "bar">
<div>./assets/imgs/placeholderBar.png</div>
</template>
<template [ngSwitchCase] = "cat">
<div>./assets/imgs/placeholderCat.png</div>
</template>¯
<template [ngSwitchCase] = "dog">
<div>./assets/imgs/placeholderDog.png</div>
</template>
</div>
</ng-template>
Я знаю, что приведенный выше код синтаксически неверен. Я ищу решение, соответствующее моему приведенному выше фрагменту. Спасибо.
Ответы 3
У вас может быть переменная стороны ts, которая устанавливает errorPath.
errorPaths:string[]=[];
//set the path wherever you receive item
switch(item.category){
//set the path for each case in loop
}
В вашем html файле
<div ngFor = "let item of items;let i=index">
<div class = "column thumbnail"><img class = "posterThumbNail" [src] = "item.imageUrl" [onError] = "errorPaths[i]" /></div>
</div>
Вы могли. Но вам понадобится массив errorPaths
Или используйте атрибут errorPath в элементе, если это возможно, и установите их
У меня может быть массив путей ошибки. Но я не понимаю, как сопоставить случай переключателя с <img> 'src' во время выполнения и при ошибке
Вы должны использовать событие (error) для обработки ошибки, и в соответствии с эта почта вы можете использовать объект для отображения резервного изображения
HTML:
<div *ngFor = "let item of items">
...
<img *ngIf = "!item.fallbackUrl" class = "posterThumbNail" [data] = "item.imageUrl" (error) = "handleError(item)" />
<img *ngIf = "item.fallbackUrl" class = "posterThumbNail" [src] = "item.placeHolder" />
...
</div>
Контроллер:
handleError(item: any) {
switch (item.category) {
case "foo":
item.fallbackUrl = './assets/imgs/placeholderFoo.png';
break;
case "bar":
item.fallbackUrl = './assets/imgs/placeholderBar.png';
break;
default:
}
}
Но в моем случае я не могу определить, есть ли ошибка при загрузке элементов. Если источник изображения не работает, необходимо разместить изображение-заполнитель, и я ищу подходящее изображение-заполнитель, соответствующее моей бизнес-логике. Кроме того, это элемент списка, помещенный в ngFor. Спасибо.
Хорошо, я редактирую решение с помощью цикла ngFor, просто прикрепите флаг «ошибка» к вашему объекту элемента. Извините, но я не понимаю, почему вы говорите, что не можете определить, есть ли ошибка, это то, что событие (ошибка) делает для вас .... Я неправильно понимаю?
Ты прав. Я имел в виду, что не могу отловить ошибку в коде TypeScript, поскольку он привязан к <img> в html. Также, как я уже сказал, опубликованный мной код синтаксически неверен. В коде, который вы предоставили, if (item.error = true), то как сопоставить путь резервного изображения с img src. Я просто поместил div в ngSwitch внутри ng-template, который не сработал.
Извините, я не прочитал ваше заявление о переключении, теперь я лучше понимаю. Я отредактировал свой ответ, надеюсь, это поможет!
Но «элемент» не является ошибкой свойства, и мы нигде не меняем значение свойства. Это не работает. Также пытаюсь понять больше о вашем решении.
Извините за неправильное название, я переименовал свойство как fallbackUrl для лучшего понимания. Даже если это не свойство вашего типа элемента, оно должно работать, набрав элемент как любой в функции handleError.
Вы также можете изменить логику и заменить заполнитель только при загрузке основного изображения. Это можно сделать с помощью ngif и (load). А как насчет того, чтобы поместить логику в класс, а не в шаблон? Легче отлаживать? Его можно завершить с помощью дополнительного массива для отслеживания загруженных изображений. Этот массив можно объединить с исходным массивом, в зависимости от того, как вы его получите и как вы им управляете.
Класс:
loaded = [false, false, false]; // should have items length
...
getReplacementImage(category) {
switch (category) {
case "dog":
return "dogImage";
case "cat":
return "catImage"
default:
return "placeholderImage"
}
HTML:
<... *ngFor = "let item of items; let i = index">
<img [class.image-error] = "!loaded[i]" ... [src] = "item.image" (load)='loaded[i]=true'>
<img *ngIf = "!loaded[i]" ... [src] = "getReplacementImage(item.category)">
</...>
CSS:
.image-error {
display:none; // to hide the placeholder image
}
Это потрясающий подход. Но в моем случае список уже построен, в нем больше пунктов. Изображение - это часть, и я не могу справиться с тем, как вы предлагали.
Это сработало для меня. Спасибо. Одно изменение, которое мне нужно сделать, - могу ли я скрыть первый <img> в случае ошибки, используя что-то вроде "class.error". Я не могу использовать CSS как таковой. Это искажает мой интерфейс. Спасибо.
Спасибо за решение. Я тоже сделал это с ngStyle. Большое спасибо за быстрые решения.
Мой - это элемент списка, помещенный в ngFor. Если какой-либо <img>, имеющий 'src', не работает, необходимо показать соответствующее изображение-заполнитель. Могу ли я использовать корпус бокового переключателя в моем случае?