图像未在 vue 和 vue bootstrap 中显示

【问题标题】：Image not showing in vue and vue bootstrap图像未在 vue 和 vue bootstrap 中显示
【发布时间】：2020-06-11 15:04:56
【问题描述】：

我想从 vue 中的 assets 文件夹中获取图片我正在使用 vue 引导程序

这是我的代码：

<b-card title="Title" img-src='@assets/profile.jpg' img-alt="Image" img-top>
  <b-card-text>
    This is a wider card with supporting text below as a natural lead-in to additional content.
    This content is a little bit longer.
  </b-card-text>
  <template v-slot:footer>
    <small class="text-muted">Last updated 3 mins ago</small>
  </template>
</b-card>

Here is my hirarcy

但它不起作用。有人可以帮我吗？

【问题讨论】：

标签： vue.js vue-cli

【解决方案1】：

要在 bootstrap-vue 组件中为各种 img（在本例中为 img-src）属性使用相对路径，您需要按照文档 here 中的说明配置 vue-loader。

这应该可以解决您面临的问题。

如果您无法为vue-loader 设置transformAssetUrls，您可以选择require。

<b-card :img-src="require('../static/picture.jpg')"></b-card>

【讨论】：

我不确定使用 @ 别名是否有效，因此您可能需要改为写入图像的直接路径。
谢谢，它的工作。 :img-src="require('@/assets/profile.jpg')" 都带有别名或不工作