【问题标题】: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')" 都带有别名或不工作
    猜你喜欢
    • 2021-02-17
    • 2018-12-13
    • 2020-02-17
    • 1970-01-01
    • 2020-04-10
    • 1970-01-01
    • 2021-04-30
    • 2019-11-28
    • 2021-01-12
    相关资源
    最近更新 更多