在Bootstrap卡中显示图像

时间:2018-07-11 12:41:27

标签: html asp.net angular

我在后端有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>

1 个答案:

答案 0 :(得分:0)

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