时间戳

首页 > 解决方案 > 如何在 src 子目录的 bootstrap-vue b-card-img 中显示图像

vue.js - 如何在 src 子目录的 bootstrap-vue b-card-img 中显示图像

问题描述

在我的 vue/cli 4/vuex/bootstrap-vue 项目/vue-router 项目中，我使用来自https://bootstrap-vue.js.org/docs/components/card/#comp-ref-b-card-的卡片图像img 和 img-src/src 有问题，当我将 /src/assets/ 子目录的图像路径设置为：

  <img alt="Vue logo" src="../../assets/logo.png">;

  <img src="../../assets/rules-of-site-small.png" alt="Read rules of site" class="p-0 m-1" @click.prevent="pageRedirect('contact-us')">

上面的2张图片显示正常。

但是下面的 2 张图片显示了无效的图片标志：

  <b-card-img src="../../assets/rules-of-site-small.png" >
  </b-card-img>
  <b-card-img img-src="../../assets/rules-of-site-small.png">
  </b-card-img>

  <b-card-img img-src="/images/rules-of-site-small.png" >
  </b-card-img>

如果有办法显示来自 b-card-img 中 /src/assets/ 子目录的图像？

"bootstrap-vue": "^2.3.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"

谢谢！

标签： vue.jsbootstrap-vue

解决方案

Vue-loader 只理解src原生 HTML 元素的属性（即<img>,<iframe>等）。

它不了解src自定义组件上的 props，这就是为什么需要设置transformAssetUrls以便 Vue 加载器知道哪些自定义组件上的哪些 props 可以接受项目的相对 URL。

看：

推荐阅读