0

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!

Petro Gromovo
  • 1,755
  • 5
  • 33
  • 91
  • Are Img and 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 Feb 05 '20 at 13:28
  • 1
    Have you tried following [this](https://bootstrap-vue.js.org/docs/reference/images/#vue-loader-transformasseturls-to-resolve-img-paths) section of the docs? – Hiws Feb 05 '20 at 13:34
  • 1
    You would have to transform the Assets url for the component to parse it. try reading this [link](https://bootstrap-vue.js.org/docs/reference/images/#vue-loader-transformasseturls-to-resolve-img-paths) – FirstIndex Feb 05 '20 at 15:22
  • 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 Feb 05 '20 at 16:48
  • 1
    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. https://vue-loader.vuejs.org/guide/asset-url.html – Troy Morehouse Feb 05 '20 at 22:28

1 Answers1

3

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:

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38