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

【问题标题】：How to use <b-img-lazy> in bootstrap vue card如何在引导 vue 卡中使用 <b-img-lazy>
【发布时间】：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 事件上添加一个侦听器。

标签： vue.js nuxt.js bootstrap-vue

【解决方案1】：

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

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

【讨论】：