How to have Vue CLI-generated project replace image srcs when the attribute is not src

Question

Created a project using Vue CLI 3.7.0 and installed bootstrap-vue 2.0.0-rc.19. Vue CLI scaffolded projects use Webpack which uses file-loader.

When running the server locally, <img src='../assets/images/test.jpg'> gets replaced by <img src='/img/test.4d111941.jpg'>.

Using a BootstrapVue directive, <b-carousel-slide img-src='../assets/images/test.jpg'> does not result in a cache-busted URL.

Anyone run into this? Wondering if I have to override some Webpack behavior in vue.config.js.

Answer 1

Needed to add this to vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options['transformAssetUrls'] = {
          img: 'src',
          image: 'xlink:href',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'img-src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }

        return options
      })
  }
}