在引导卡中显示图像答案

【问题标题】：Displaying image In Bootstrap card在引导卡中显示图像
【发布时间】：2018-07-11 12:41:26
【问题描述】：

我在后端有 Asp.Net Core Web API，在前端有 Angular。用户写了一个关于几个图像的故事，这些图像以角度保存/定位在静态文件夹“资产”中。

现在我的问题是文章从后端 API 中提取，图像位于前端资产文件夹中。如何循环进入 assets/images 文件夹以根据所写的故事提取特定图像。

让我展示客户端的 html 代码：-

<div class="container">
    <div class="row">
        <div class="col-4 ml-0" *ngFor="let t of TravelBlogs">
            <div class="card">
                <img class="card-img-top img-responsive" src="assets/images/mount.jpg" alt="Urgen">
                <div class="card-body">
                    <h4 class="card-title">{{t.title}}</h4>
                    <h4 class="card-text text-muted"> {{t.postCreatedDate | date}}</h4>
                    <h4 class="card-text">{{t.Name}}</h4>
                    <p class="card-text"> {{t.description | truncatetext:100}}
                        <a href="#" class="btn btn-success btn-sm">read more..</a>
                    </p>
                </div>
            </div>
        </div>       
    </div>
</div>

【问题讨论】：

您应该将图像名称保存到后端，以便您可以轻松地从本地获取图像
实际上，我不想在数据库中保存任何图像甚至名称，将有数百张图像进入该特定文件夹，因此下面建议的代码无法达到目的，因为它未来将成倍增加有效载荷。我希望在客户端编码中应该有其他方法来解决这个问题，我可以将这些图像绑定在一个变量中并循环通过它来从基于故事的特定文件夹中获取特定的图像/图像......我希望这对你来说很有意义。

标签： html asp.net angular

【解决方案1】：

<md-grid-list cols="4" rowHeight="250px">
  <md-grid-tile *ngFor="let model of models">
    <img src="assets/{{model.name}}.png" alt="model {{model.name}}">
  </md-grid-tile>
</md-grid-list>

【讨论】：