Угловой 7: Невозможно отобразить изображение

Question

Я делаю что-то вроде этого углового примера js: https://jsbin.com/gumaraz/edit?html,output

но мне нужно сделать с Angular 7, и я попытался обновить код из Angular.js до angular, однако он не может ничего отобразить

component.html

  WidthLength : <input type="number" min="1" step="5" [(ngModel)]="widthLength" (change)="showPic()" ><br>
  HeightLength : <input type="number" min="1" step="5" [(ngModel)]="heightLength" (change)="showPic()"><br>

  <img [src]='imageUrl '/>

component.ts

  widthLength = '1024';
  heightLength = '768';
  imageUrl = 'https://lorempixel.com/{{widthLength}}/{{heightLength}}/';

  showPic() {
    if (this.widthLength !== null && this.heightLength !== null &&
      this.widthLength !== undefined && this.heightLength !== undefined) {
      this.imageUrl = 'http://lorempixel.com/' + this.widthLength + '/' + this.heightLength + '/';
    } else {
      alert('null');
    }
  }

мой код (стакблиц): https://stackblitz.com/edit/angular-555ojr

Может кто-нибудь помочь мне, пожалуйста

Answer 1

Ваш URL искажен. Вы пытаетесь получить ресурс типа

https://lorempixel.com/{{widthLength}}/{{heightLengt}, который, очевидно, не существует. Подготовьте ваш URL-адрес правильно, так как ваши widthLength и heightLength не будут решены.

Я могу только предположить, что это переменные компонента / локальные, так что это должно быть больше похоже на

imageUrl = http://lorempixel.com/${widthLength}/${heightLength}/; в случае локальных переменных или this.widthLength и т. д. в случае поля компонента

Answer 2

Поскольку вы отредактировали свой вопрос с помощью действительного кода:

1. Удалить это фиктивное значение инициализации
2. Звоните showPic() куда-нибудь

3. Использовать HTTPS

     widthLength = '1024';
     heightLength = '768';
     imageUrl = null; // removed dumb initialization value.
   
     ngOnInit(){
        this.showPic(); // call it here for example
     }
     showPic() {
       if (this.widthLength !== null && this.heightLength !== null &&
         this.widthLength !== undefined && this.heightLength !== undefined) {
         this.imageUrl = 'https://lorempixel.com/' + this.widthLength + '/' + this.heightLength + '/';
       } else {
         alert('null');
       }  
      }
   

Если у вас все еще будут проблемы с этим, подготовьте работу stackblitz и поделитесь ссылкой редактора.

Answer 3

Попробуйте это (по защищенной сети https)

imageUrl = 'https://lorempixel.com/400/400/';
<img [src]=" imageUrl ">

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

Рабочий пример