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

Question

我想在我的网页上显示名片视图。卡片视图应具有背景图像，在其下方应有卡片标题，在其下方应有一些短文本。

这是我尝试代码的方式，

<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

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

Answer 2

卡视图的背景图片未显示

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

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

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

测试结果