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

0
votes

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!

1
vue.jsbootstrap-vue
Are Img and <b-card> in the same component or in components that are in the same folder. it is related to the webpack configuration when trying to resolve the path for your assets. can you add the error you are getting and the structure of the project – Amine Mchayaa
Have you tried following this section of the docs? – Hiws
You would have to transform the Assets url for the component to parse it. try reading this link – FirstIndex
Yes, I implemented it with default options and it works. But I just wonder which additive functionality/possibility can I get modifieng all these options? – Petro Gromovo
Vue-loader only understands src attributes for native 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 no what props on what custom components that can accept a project relative URL. vue-loader.vuejs.org/guide/asset-url.html – Troy Morehouse

1 Answers

2
votes

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: