CODEWITHSUNDEEP
vue.jsbootstrap-vue
Petro Gromovo
Petro Gromovo

Reputation: 2185

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

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!

Upvotes: 0

Views: 5898

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Vue-loader only understands src attributes on native HTML elements (i.e. <img>, <iframe>, etc).

It does not understand src props on custom components, which is why one needs to set up transformAssetUrls so Vue loader will know what props on what custom components that can accept a project relative URL.

See:

Upvotes: 3

Related Questions