图片未在 vue 和 vue 中显示 bootstrap

Question

我想从 vue 中的 assets 文件夹中获取图像并且我正在使用 vue bootstrap

这是我的代码：

<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

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

Answer 1

要在 bootstrap-vue 组件中为各种 img（在本例中为 img-src）道具使用相对路径，您需要配置 vue-loader，如文档 here.

这应该可以解决您遇到的问题。

如果您无法为 vue-loader 设置 transformAssetUrls，您可以 require 作为替代。

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

图片未在 vue 和 vue 中显示 bootstrap

Image not showing in vue and vue bootstrap

vue.js

vue-cli