Блог

У меня есть вход для загрузки файла изображения с предварительным просмотром для отображения загруженного файла изображения. Там мне нужно выполнить некоторые условия, такие как::

1. показывать изображение по умолчанию, если файл изображения не выбран и в базе данных нет изображения, в противном случае показывать соответствующие изображения
2. если в базе данных есть изображение, покажите его в предварительном просмотре, затем после выбора загрузки файла покажите загруженный файл в предварительном просмотре

Я не понимаю, как я могу справиться с этими условиями на src теге img.

угловой html-код

 <div class="profile_img">
    <div class="img">
        <img [src]="url?url:defaultUserProfileUrl" alt="Profile Image" class="img-fluid">
    </div>
    <div class="form-group">
        <div class="custom-file">
            <input type="file" id="myfile" name="myfile" [formControl]="profile_image" [(ngModel)]="currentInput"
            accept='image/*' (change)="onFileSelected($event)" />
        </div>
    </div>
</div>
 

если изображение базы данных присутствует, то я показываю, как показано ниже:

 <img [src]="userdata.profile_path?userdata.profile_path:defaultUserProfileUrl" alt="Profile Image " class="img-fluid" />
 

угловой код ts

   url: any = [];
  defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';
  onFileSelected(event) {
    console.log(event.target.files[0]);
    this.currentInput = event.target.files[0];

    if (event.target.files amp;amp; event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => {
        this.url = event.target.resu<
      };
    }
  }
 

Как я могу обрабатывать несколько/вложенных условий if else в src изображении? или есть какое-то другое решение для этого?

Пожалуйста, направляйте и помогайте. Заранее спасибо.

Вы уже определили переменную defaultUserProfileUrl:строка = ‘ресурсы/изображения/default_user_profile.png’;

теперь определите еще одну переменную как activeImageUrl = defaultUserProfileUrl:строка

и внутри ngOnInit() сделайте внутренний вызов, чтобы получить изображение, хранящееся в БД, если таковое имеется, и заменить activeImageUrl полученным изображением.

И в html

 <img [src]="activeImageUrl" alt="Profile Image" class="img-fluid">