卡片视图的背景图像未显示答案

【问题标题】：Background image for card view isn't displaying卡片视图的背景图像未显示
【发布时间】：2020-11-21 10:49:06
【问题描述】：

我想在我的网页中显示卡片视图。卡片视图应该有一个背景图片，下面应该有卡片标题，下面应该有一些短文本。

这是我尝试代码的方式，

<h1>ViewAllVehicles</h1>

<div class="card-columns">
@foreach (var item in Model)
    {
    <div class="card">
        <div class="card-img" style="background-image: url('@("~/VehicleImages/"+item.vehicleImageName)')"></div>

        <div class="card-body">
            <h5 class="card-title">@item.vehicleType</h5>
        </div>

        @item.vehicleAvailability
        @item.plateNumber

    </div>
    }
</div>


Currently this is the result I get, 
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/O6P3L.jpg

【问题讨论】：

标签： html asp.net-core razor asp.net-core-3.0

【解决方案1】：

尚不清楚您想要哪种解决方案，因此我将从引导文档中提供这两种解决方案。第一个是带有叠加层的背景图片：

<div class="card">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">....stuff</p>
    <p class="card-text">...more stuff</p>
  </div>
</div>

或者第二种选择：图片下方有文字：

<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">...stuff</p>
  </div>
</div>

如您所见，您的第一个问题是您缺少背景图像的 img 标签。现在我重新阅读了您的问题，我猜您想要选项 2。

【讨论】：

【解决方案2】：

卡片视图的背景图片未显示

请尝试使用@Url.Content("~/VehicleImages/"+item.vehicleImageName)，如下所示。

<div class="card-img" style="background-image: url('@Url.Content("~/VehicleImages/"+item.vehicleImageName)')"></div>

请检查您是否将图像文件放在正确的文件夹中，如下所示。

测试结果

【讨论】：