Home:ALL Converter>How to show image in bootstrap-vue b-card-img from src subdirectory

How to show image in bootstrap-vue b-card-img from src subdirectory

Ask Time:2020-02-05T21:17:11         Author:Petro Gromovo

Json Formatter

In my vue/cli 4/vuex / bootstrap-vue project / vue-router project I use card image from https://bootstrap-vue.js.org/docs/components/card/#comp-ref-b-card-img and I have a problem with img-src/src, when I set image path from /src/assets/ subdirectory as:

  <img alt="Vue logo" src="../../assets/logo.png">;

  <img src="../../assets/rules-of-site-small.png" alt="Read rules of site" class="p-0 m-1" @click.prevent="pageRedirect('contact-us')">

2 images above are shown ok.

But 2 images below shows invalid image sign :

  <b-card-img src="../../assets/rules-of-site-small.png" >
  </b-card-img>
  <b-card-img img-src="../../assets/rules-of-site-small.png">
  </b-card-img>

  <b-card-img img-src="/images/rules-of-site-small.png" >
  </b-card-img>

If there is a way ro show images from /src/assets/ subdirectory in b-card-img ?

"bootstrap-vue": "^2.3.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"

Thanks!

Author:Petro Gromovo,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/60076736/how-to-show-image-in-bootstrap-vue-b-card-img-from-src-subdirectory
yy