图片下方或图片上的按钮 *ngFor 循环答案

【问题标题】：Button under images or on the images *ngFor loop图片下方或图片上的按钮 *ngFor 循环
【发布时间】：2021-07-24 15:48:57
【问题描述】：

从 *ngFor 循环我可以填充图像，但我想在图像下方或图像上添加一个按钮。我不熟悉 CSS 下面是我的代码。

HTML 代码

    <div class="container">
              <div *ngFor="let img of imageData">
                <p [hidden]="true">{{img.Id}}</p>
                <img class="original" [alt]="img.Name"
                     src="https://localhost:44349/{{img.ImagePath}}"
                     width="350" height="350"/>
                <button type="submit" (click)="deleteImage()" class="btn btn-danger"><i 
                    class="far fa-trash-alt"></i>
                  Remove
                </button>
              </div>
            </div>

CSS

.container {
  position: relative;
  text-align: center;
}

.original {
  width: 250px;
  height: 250px;
  float: left;
  margin: 1.66%;
  transition-duration: 0.3s;
  border-radius: 15px;
}

【问题讨论】：

标签： css angular

【解决方案1】：

希望这就是你要找的。p>

.container {
    /* position: relative;*/
    text-align: center; 
    display: flex;
    flex-direction: column;
}

.original {
    width: 250px;
    height: 250px;
    float: left;
    margin: 1.66% auto;
    transition-duration: 0.3s;
    border-radius: 15px;
}

.content {
    display: flex;
    flex-direction: column;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="content">
        <p>Image Id</p>
        <img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
        <button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
            Remove
        </button>
    </div>
    <div class="content">
        <p>Image Id</p>
        <img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
        <button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
            Remove
        </button>
    </div>
</div>

对于带有动态图像的角度，您的模板将是这样的。

<div class="container">
    <div class="content"  *ngFor="let img of imageData">
        <p [hidden]="true">{{img.Id}}</p>
        <img class="original" src="https://localhost:44349/{{img.ImagePath}}" width="350" height="350" />
        <button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
            Remove
        </button>
    </div>
</div>

【讨论】：

感谢您的帮助。我的图片正在动态加载。
你可以使用`src="localhost:44349{{img.ImagePath}}"`我已经更新了答案