Bootstrap-Vue card component image doesn't render

Question

I am trying to get a simple Bootstrap card on a static website I am making in Vue.js. I am using Bootstrap-Vue for this. However, I cannot seem to get the image to show when I use the b-card with the img attribute. Here is the documentation on a card:

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

And here is my code that is not showing the image (all other text is rendering, even the github icon)

<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>

I think it must have something to do with the img attribute in the b-card, but I am not sure how to fix it. Also, here is my error in the console:

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

Answer 1

Are you using Webkit? Try:

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

require ensures that Webkit replaces the asset path when it compiles your template.

Also note the : before the img attribute - shorthand for v-bind