ブートストラップ-Vueカードのコンポーネントイメージがレンダリングされない

Question

私はVue.jsで作成している静的なWebサイトに簡単なブートストラップカードを取得しようとしています。私はこれにBootstrap-Vueを使用しています。しかし、img属性を持つb-cardを使用すると、イメージが表示されないようです。ここでは、カード上のドキュメントは次のとおりです。

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（見つかりません）

Answer 1

私は、コードをテストし、それが後のimg属性に余分な単一引用符を削除正常に動作します。

Answer 2

Webkitを使用していますか？試してみてください：

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

がを必要とすることは、あなたのテンプレートをコンパイルするときのWebkitは、資産のパスを置き換えることを保証します。 「

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

とプロパティを追加します。V-バインド

Answer 3

バインドのための速記続くよう<b-card>コンポーネント内のimg - IMG属性の前に：

またの点に注意してください。 vue-loader.conf.jsの「transformToRequire」オブジェクトに値「img-src」を持つ「b-card」をhttps://bootstrap-vue.js.org/docs/reference/images/

例：

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

は、このヘルプをしていますか？