使用ngIf更改Angular 8中的图像时的问题编写语法

Question

我是Angular世界的新手，在基于ngx-translate方法编写代码或语法以显示不同图像方面存在问题。假设当用户在语言选择器中选择英语时，将显示图像的英语措词；否则，如果用户在语言选择器中选择“普通话”，则会显示图像的普通话。我输入的ngIf编码是这样的：

下面是ts和html文件中的相关编码，感谢您的帮助：）

。ts文件：

import  Component, ViewChild, ViewEncapsulation  from '@angular/core';
import  NgbCarousel, NgbSlideEvent, NgbSlideEventSource  from '@ng-bootstrap/ng-bootstrap';
import 
  trigger,
  state,
  style,
  animate,
  transition
 from '@angular/animations';
import TranslateService from '@ngx-translate/core';
import _ from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
import defaultLanguage from "../../assets/i18n/en.json";
//import imgArray from '../../assets/i18n/en.json';
//import * as dataJSON from '../../assets/i18n/en.json';


@Component(
  selector: 'ngbd-carousel-pause', 
  templateUrl: './carousel-pause.html',
  encapsulation: ViewEncapsulation.None,
  styles:[`
  .carousel-item
  
    display:block;
    opacity:0;
    transition: opacity 2s;
  
  .carousel-item.active
  
    display:block;
    opacity:1;
    transition: opacity 2s;

  
  .carousel-control-next-icon 

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");

    

  .carousel-control-prev-icon 

      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");

  

  .form-control
    width: 200px !important;
    height: 30px;
  

  .account-form
    padding-left: 30px;
  
`]

)
export class NgbdCarouselPause 

  constructor(private translate: TranslateService) 
    translate.setTranslation('en', defaultLanguage);
    translate.setDefaultLang('en');


useLanguage(language: string) 
  this.translate.use(language);


  //readJSON = dataJSON;

  //constructor()
    //this.images2 = imgArray;
  //
    images = [
        "assets/banner1.jpg",
        "assets/banner2.png",
        "assets/banner3.png",
        "assets/banner4.jpg",
        "assets/banner5.jpg",
        "assets/banner6.jpg"

    ];

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @ViewChild('carousel', static : true) carousel: NgbCarousel;

  togglePaused() 
    if (this.paused) 
      this.carousel.cycle();
     else 
      this.carousel.pause();
    
    this.paused = !this.paused;
  

  onSlide(slideEvent: NgbSlideEvent) 
    if (this.unpauseOnArrow && slideEvent.paused &&
      (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) 
      this.togglePaused();
    
    if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) 
      this.togglePaused();

。html文件：

<div class="container">
  <div class="row">
    <div class="col-sm-9">


      <ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
        <ng-template ngbSlide *ngFor="let img of images; index as i">
          <!--<div class="carousel-caption">
            <h3>My slide i + 1 title</h3>
          </div>-->
          <a href="https://www.google.fr/?q=Number+i+1" target="_blank" rel="nofollow noopener noreferrer">
            <div class="picsum-img-wrapper">
              <img class="img-fluid class mx-auto" [src]="img" alt="My image i + 1 description">
            </div>
          </a>
        </ng-template>
      </ngb-carousel>


    </div>
      <!--
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="pauseOnHover" [(ngModel)]="pauseOnHover">
        <label class="form-check-label" for="pauseOnHover">Pause on hover</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="unpauseOnArrow" [(ngModel)]="unpauseOnArrow">
        <label class="form-check-label" for="unpauseOnArrow">Unpause when clicking on arrows</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="pauseOnIndicator" [(ngModel)]="pauseOnIndicator">
        <label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>
      </div>
      <button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">
        paused ? 'Cycle' : 'Pause' 
      </button>
      -->




    <div class="col-sm-3">
      <div ngIf="translate==='en'">
        <img src="./assets/opening-account.png" class="img-fluid">

      </div>



      <!--</div>-->  


        <!--<div class="img-fluid">
             'imgArray.img' | translate 
        </div>-->

        <div class="account-form">
          <form class="form-inline">
              <input class="form-control mr-sm-2" type="search" placeholder="Firstname" aria-label="Search">
              <br><br>
              <input class="form-control mr-sm-2" type="search" placeholder="Lastname" aria-label="Search">
              <br><br> 
              <input class="form-control mr-sm-2" type="search" placeholder="Email" aria-label="Search">
              <br><br> 

          </form>
        </div>

        <img src="./assets/joinnow.png" class="img-fluid">
    </div>




  </div>
</div>