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卡組件圖像不會呈現

回答

相關問題