Question

使用Angular 5和Bootstrap，我创建了一个表单，允许用户将图像与URL链接。我想限制此图像具有特定的宽高比。

这是我对ngModel smallimagelink的输入。我正在使用此表单在提交项目之前生成预览。

<div class="col-md-6 mb-3">
  <label for="smallimagelink">Small image link (used if review will not be a feature)</label>
  <input type="text" class="form-control" placeholder="" value="" required name="smallimagelink" [(ngModel)]="smallimagelink">
</div>

<div class="card flex-md-row mb-4 box-shadow h-md-250">
  <img class="card-img-right flex-auto d-none d-md-block" src="{{smallimagelink}}" alt="Card image cap">
</div>

如果使用正确的URL填充输入，则会正确显示预览。但是，我希望能够使用Angular / JavaScript检查预览中src中引用的图像。

我该怎么做？

Answer 1

您可以将图片标记为：

<img #smallImage class="card-img-right flex-auto d-none d-md-block" src="{{smallimagelink}}" alt="Card image cap">

...因此它有一个名称，您可以将其称为AppComponent的ViewChild，如下所示：

@ViewChild('smallImage') private smallImageRef: ElementRef;

然后从那里开始获取nativeElement并将一个监听器附加到其onload方法。我将更多地使用你的stackblitz，看看它是怎么回事。

实际上，你可以不用@ViewChild来做这样的事情：

<div class="col-md-6 mb-3">
  <label for="smallimagelink">Small image link (used if review will not be a feature)</label>
  <input type="text" class="form-control" placeholder="" value="" required name="smallimagelink" [(ngModel)]="smallimagelink">
</div>

<div class="card flex-md-row mb-4 box-shadow h-md-250">
  <img class="card-img-right flex-auto d-none d-md-block" src="{{smallimagelink}}" alt="Card image cap" (load)="onLoad($event)" (error)="onError()">
  <p>{{imageWidth}}, {{imageHeight}}</p>
</div>

-

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Angular 5';
  imageWidth = '-';
  imageHeight = '-';

  onLoad(event: Event) {
    const smallImage = event.target as HTMLImageElement;
    this.imageWidth = String(smallImage.width);
    this.imageHeight = String(smallImage.height);
  };

  onError() {
    this.imageWidth = '-';
    this.imageHeight = '-';
  };
}

上面只是用所选图像的宽度和高度更新显示，但它是用宽高比做任何你想做的事情的起点。

https://stackblitz.com/edit/angular-hiq9qa

检查来自ngModel的图像的宽高比

1 个答案: