Bootstrap-Vue card component image doesn't render

4
votes

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)

3
htmltwitter-bootstrapvue.js

3 Answers

4
votes

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

4
votes

Bind the img within the <b-card> component as followed:

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

And add the property 'b-card' with the value 'img-src' to the "transformToRequire" object in vue-loader.conf.js as described here https://bootstrap-vue.js.org/docs/reference/images/

Example:

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

Does this help?

0
votes

I test the code and it works fine after remove the extra single quotes on the img attribute.