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

Question

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

时，img-src / src出现问题

  <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张图像显示无效的图像符号：

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

谢谢！

Answer 1

Vue-loader仅理解本机HTML元素（即src，<img>等）上的<iframe>属性。

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

参见：

• https://vue-loader.vuejs.org/guide/asset-url.html
• https://bootstrap-vue.js.org/docs/reference/images/