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

我想在一个静态网站上获取一个简单的Bootstrap卡，我在Vue.js中制作。我正在使用Bootstrap-Vue。不过，当我使用b-card和img属性时，我似乎无法看到图像。这里是一个卡上的文件：Bootstrap-Vue卡组件图像不会呈现

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（未找到）

来源

2017-07-27 lnamba

我测试的代码，它工作正常后删除的IMG属性额外的单引号。

来源

2017-07-27 05:35:59 Nico

我试过这个，但它仍然在说图像没有找到... – lnamba

您使用的是Webkit吗？尝试：

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

需要确保当您编译模板的Webkit替代的资源路径。

还要注意：的IMG属性之前 - 简写V-绑定

来源

2017-07-27 06:29:38 camaulay

当我尝试这个，它说' - 无效表达：：img =“require（../ assets/q1.png）”' – lnamba

我的不好，路径需要用单引号。 – camaulay

绑定<b-card>组件内的IMG如下：

<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卡'添加到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' 
}

这是否帮助？

来源

2017-11-20 15:58:42 Marius

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

回答

相关问题