Html 卡片视图的背景图像不是'；t显示

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

下面是我如何尝试代码的

查看所有车辆

@foreach（模型中的var项目）
{
@项目.车辆类型
@项目1.车辆可用性
@项目编号
}
目前这是我得到的结果，
[！[在此处输入图像描述][1][1]
[1]: https://i.stack.imgur.com/O6P3L.jpg

不清楚您想要哪种解决方案，因此我将从引导文档中提供这两种解决方案。第一个用于具有覆盖的背景图像：

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

不清楚您想要哪种解决方案，因此我将从引导文档中提供这两种解决方案。第一个用于具有覆盖的背景图像：

<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

卡视图的背景图像未显示

请尝试使用

@Url.Content（“~/VehicleImages/”+item.vehicleImageName）

，如下所示

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

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

测试结果

卡视图的背景图像未显示

请尝试使用

@Url.Content（“~/VehicleImages/”+item.vehicleImageName）

，如下所示

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

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

测试结果