如何在引导 vue 卡中使用 <b-img-lazy>

Posted 2023-02-22

【中文标题】如何在引导 vue 卡中使用 <b-img-lazy>

【英文标题】：How to use <b-img-lazy> in bootstrap vue card

【发布时间】：2019-07-01 03:16:48

【问题描述】：

<b-card overlay
  :title="name"
  :sub-title="subtitle"
  :img-src="cardImg"
  img-top
  style="max-width: 20rem;"
  class="mb-2 insider-image"
  ref="card">
</b-card>

我目前正在为我的卡片背景渲染一个巨大的图像文件。我如何使用b-img-lazy Insider 卡

【问题讨论】：

你的意思是你想让卡片的背景图片延迟加载？

@jom 在 bootstrap vue 中已经有一个组件可以延迟加载，它是 但如果这在卡中不可用，那么是的，我该如何延迟加载图像？跨度>

我确定您已经尝试将这个<b-img-lazy> 组件放在<b-card> 中，但是没有用吗？

我可以在<b-card> 中添加<b-img-lazy>，但它不会被视为卡片的背景图像。它被视为内容。

看起来你需要自己实现这个功能，看看this post。它适用于 jQuery，但关键是您只需要在 load 事件上添加一个侦听器。

【参考方案1】：

使用新的b-card-img-lazy 子组件。您仍然需要手动将子组件放置在 <b-card no-body> 中，并放置构建 cafrd 所需的任何其他子组件（即 <b-card-body> 等）。

请参阅b-card 文档页面的“厨房水槽”示例。它显示了放置一个常规的<b-card-img> 子组件，可以将其更改为<b-card-img-lazy> 子组件。