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>

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

http://localhost:8080/assets/q1.png 404（未找到）

Answer 1

将img绑定在<b-card>组件中，如下所示：

    <b-card img-src="../assets/q1.png" title="7 Little Words" class="mb-2 col-md-6">
        ...your markup goes here....
    </b-card>

将值为'img-src'的属性'b-card'添加到vue-loader.conf.js中的“transformToRequire”对象，如此处所述https://bootstrap-vue.js.org/docs/reference/images/

示例：

transformToRequire: {
    'video': 'src',
    'source': 'src',
    'img': 'src',
    'image': 'xlink:href',
    'b-card': 'img-src'
}

这有帮助吗？

Answer 2

我测试代码，在删除img属性上的额外单引号后，它可以正常工作。

Answer 3

您使用的是Webkit吗？尝试：

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

require 可确保Webkit在编译模板时替换资产路径。

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

的简写

Bootstrap-Vue卡组件图像无法呈现

3 个答案: