Javascript 检查ngModel中图像的纵横比

使用Angular 5和Bootstrap，我创建了一个表单，允许用户将图像链接到URL。我想限制这个图像有一个特定的纵横比

这是我对ngModel

smallimagelink

的输入。 我使用此表单在提交项目之前生成预览

这是HTML和

小图像链接（如果审查不是功能，则使用）

使用正确的URL填写输入后，将正确显示预览。但是，我希望能够使用Angular/JavaScript在预览中检查

src

中引用的图像

---

我该怎么做？

您可以这样标记图像：

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

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

<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>

然后从那里获取nativeElement并将侦听器附加到其onload方法。我会继续玩你的stackblitz，看看效果如何

实际上，您可以不使用@ViewChild，而是执行以下操作：

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

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

<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>

以上只是用所选图像的宽度和高度更新显示，但这是使用纵横比执行任何操作的起点