html - Bootstrap-Vue 卡组件图像不呈现

Question

我想在我用 Vue.js 制作的静态网站上获得一张简单的 Bootstrap 卡片。为此，我正在使用 Bootstrap-Vue。但是，当我将 b-card 与 img 属性一起使用时，我似乎无法显示图像。这是卡片上的文档:

https://bootstrap-vue.js.org/docs/components/card

这是我的代码，没有显示图像(所有其他文本都在渲染，甚至是 github 图标)

<b-card img="`../assets/q1.png`" title="7 Little Words" class="mb-2 col-md-6">
       <!--The image above is not showing-->
  <h5 :style="{fontSize:1.3+'em', marginTop:20+'px'}">An addictive vocabulary puzzle for word nerds</h5>
  <div class="demo">
    <a href="" :style="{marginBottom:10+'px'}">VIEW DEMO</a>
  </div>
  <div class="github">
    <h4>Github</h4>
                  <!--This image below is showing-->
    <a href=""><img src="../assets/GitHub.png" alt="GitHub"></a> 
  </div>
</b-card>

我认为它一定与 b-card 中的 img 属性有关，但我不确定如何修复它。另外，这是我在控制台中的错误:

http://localhost:8080/assets/q1.png 404 (Not Found)

Answer 1

你在使用 Webkit 吗？尝试:

<b-card :img="require('../assets/q1.png')" 
        title="7 Little Words" 
        class="mb-2 col-md-6">

require 确保 Webkit 在编译您的模板时替换资源路径。

另请注意 img 属性之前的 : - v-bind

的简写