时间戳

首页 > 解决方案 > 如何在 BootstrapVue 轮播中包含图像？

javascript - 如何在 BootstrapVue 轮播中包含图像？

问题描述

我正在尝试将图像添加到 BoostrapVue 中 b-carousel 的img-src=""属性。图像当前保存在资产文件夹中。

  <b-carousel-slide img-src="../assets/life.jpg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

在此处输入图像描述

我添加了在下面的结果图像中查找： 在此处输入图像描述

我确定图像已正确保存在正确的位置： 在此处输入图像描述

标签： javascriptvue.jsvue-componentvue-clibootstrap-vue

解决方案

如果使用带有 webpack 的加载器（即 vue-loader、url-loader 等），您需要确保加载器知道img-src接受 URL。

有关如何告诉加载器处理自定义组件上的 URL 道具的信息，请参阅文档：https://bootstrap-vue.js.org/docs/reference/images（特别是 Vue Loader transformAssetUrls）

推荐阅读