当属性不是src时，如何让Vue CLI生成的项目替换图像src

Question

使用Vue CLI 3.7.0创建一个项目，并安装bootstrap-vue 2.0.0-rc.19。 Vue CLI支架项目使用Webpack，后者使用文件加载器。

在本地运行服务器时，<img src='../assets/images/test.jpg'>被<img src='/img/test.4d111941.jpg'>取代。

使用BootstrapVue伪指令，<b-carousel-slide img-src='../assets/images/test.jpg'>不会导致缓存无效的URL。

有人碰到这个吗？想知道我是否必须重写vue.config.js中的某些Webpack行为。

Answer 1

需要将其添加到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
      })
  }
}