Как скрыть Div в angular 4 с помощью webApi

здесь я использую веб-приложение angular 4. здесь, если изображение находится в расположении файла, покажите изображение, а другое условие, если изображение не отображается, пустое пространство. (не показывать как это Как скрыть Div в angular 4 с помощью webApi)
если кто-нибудь, пожалуйста, помогите мне в этом решении

Это мой файл Component.html

   <div class = "figure-left col-md-5 col-sm-5 col-xs-12">
 <figure class = "photo">
 <img [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block" />
                </figure>
            </div>

это мой WebAPI

....etc.........
  foreach (spSpecificItems_Result item in itemList)
            {
                ITemDetail objItem = new ITemDetail();
                var image = item.ItemImage;
                if (image != null)
                {
                    base64String = System.Convert.ToBase64String(image);
                    htmlsrc = "data:image/png;base64," + base64String;

                }
                else
                {
//here else condition i want to show empty space in my output

                }

                objItem.ItemID = item.ItemID;
                objItem.ItemCode = item.ItemCode;
    etc ....etc....

это нормально, если вы показываете изображение по умолчанию, если изображение не найдено?

bhaumik shah 25.10.2018 10:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
71
3

Ответы 3

вы можете использовать директиву

<div class = "figure-left col-md-5 col-sm-5 col-xs-12" *ngIf = "condition">
   <figure class = "photo">
      <img [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block" />
   </figure>
</div>

если это правда, он показывает блок, в противном случае он остается пустым

вы можете использовать любой из этих двух методов

* ngIf удалит элемент из DOM. когда скрытый атрибут просто измените свойство отображения на none

<img *ngIf = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block"/>

<img [hidden] = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block"/>

или используйте onError для отображения изображения по умолчанию, если что-то пошло не так

<img *ngIf = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block" onError = "this.src='./app/assets/images/placeholder.jpg';" alt = "..."/>

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

<div  class = "col-md-6">
    <img  src = "{{logo+''+data.image}}" alt = "Item Image" height = "150" width = "200" style = "min-height: 91px; max-width: 109px" onError = "this.src='assets/images/users/medilogo.png';">
</div>

Если приведенный выше код не работает, просто сообщите мне, чтобы я мог вам помочь

Другие вопросы по теме