<b-image src="/.svg">

Hello. This is my issue: when my attribute src in my <b-img> appoint for a svg, the console says 404. But if i set some url for the src, this works well. If i try with <img>, the svg load too.

Didn’t work:

<b-img src="../assets/SVG/logo-home.svg" fluid alt="logo-home.svg">

Work:

<b-img src="http://verdao.net/imgs/noticias/moises_30_home.jpg" fluid alt="logo-home.svg"

Work:

<img src="../assets/SVG/logo-home.svg" alt="logo-home.svg">

I am using the Nuxt.js.

I try <b-img src="assets\Ativo2.png" alt="logo-home.svg"> now and not works too, no error, but not render.

[tmorehouse]

If for some reason you cannot configure the vue-loader transformToRequire option, you can use the following webpack workaround:

<b-img :src="require('~/assets/img/picture.jpg')" />

Just make sure you use the v-bind syntax for src (i.e. add the : in front of src)

[nekdolan]

@tmorehouse I have reinstalled my whole code an I noticed that the vueLoader I now have does not have the query attribute so I had to use the options attribute. See also: https://github.com/nuxt/nuxt.js/issues/956

{
  build: {   
    extend (config, ctx) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.transformToRequire = {
        'img': 'src',
        'image': 'xlink:href',
        'b-img': 'src',
        'b-img-lazy': ['src', 'blank-src'],
        'b-card': 'img-src',
        'b-card-img': 'img-src',
        'b-carousel-slide': 'img-src',
        'b-embed': 'src'
      }
    }
  }
}

So it depends on the version, but I am not entirely sure which is which