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

Posted 2023-02-23

【中文标题】如何在 src 子目录的 bootstrap-vue b-card-img 中显示图像

【英文标题】：How to show image in bootstrap-vue b-card-img from src subdirectory

【发布时间】：2020-05-21 10:09:21

【问题描述】：

在我使用的 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="../../assets/logo.png">;

  <img src="../../assets/rules-of-site-small.png"  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"

谢谢！

【问题讨论】：

Img 和 是在同一个组件中还是在同一个文件夹中的组件中。尝试解析资产路径时，它与 webpack 配置有关。你能添加你得到的错误和项目的结构吗

您是否尝试过关注文档的this 部分？

您必须转换 Assets url 才能让组件解析它。尝试阅读此link

是的，我使用默认选项实现了它并且它可以工作。但我只是想知道我可以修改所有这些选项的哪些附加功能/可能性？

Vue-loader 只能理解原生元素（即 img、iframe 等）的 src 属性。它不了解自定义组件上的 src 道具，这就是为什么需要设置 transformAssetUrls 以便 vue 加载器不会在哪些自定义组件上没有什么道具可以接受项目相对 URL。 vue-loader.vuejs.org/guide/asset-url.html

【参考方案1】：

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

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

见：

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