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

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
      })
  }
}