Question

我正在尝试选择一些图像并在各个地方查看它们。

我可以选择图像，但是如何将它们放在不同的位置？

我有几个盒子，如果我选择3张图像，我希望其中一个放在主盒子（大盒子）中，其余两个放在小盒子中。

有人可以帮助我吗？

urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }

HTML

  <img *ngFor="let url of urls" [src]="url" width="300" height="300" id="list">
  <input type="file" multiple (change)="detectFiles($event)">
<div class="row">
    <div class="Upcard">
      <div class="card-block" id="2">
      </div>
    </div>   
    <div class="Upcard">
      <div class="card-block" id="3">
      </div>
    </div>
</div>

Answer 1

您可以执行以下操作：

<!-- render first image here -->
<img [src]="urls[0]" width="300" height="300" id="list">
<input type="file" multiple (change)="detectFiles($event)">
<div class="row">
    <!-- Render items except the first here: -->
    <div class="Upcard" *ngFor="let url of urls | slice:1">
      <div class="card-block">
          <img [src]="url" width="300" height="300">
      </div>
    </div>
</div>

您始终在顶部的urls中呈现第一项，而在ngFor中始终在其下方呈现其余（第一项除外）。

角度预览图像在正确的位置

1 个答案: