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

Question

使用 Vue CLI 3.7.0 创建了一个项目并安装了 bootstrap-vue 2.0.0-rc.19。 Vue CLI 脚手架项目使用使用 file-loader 的 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
      })
  }
}

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

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

vue.js

vue-cli

bootstrap-vue

vue-cli-3