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

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

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

<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

Background image for card view isn't displaying

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

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

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

测试结果

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

Background image for card view isn't displaying

html

razor

asp.net-core

asp.net-core-3.0