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

Posted 2023-02-22

【中文标题】当属性不是 src 时如何让 Vue CLI 生成的项目替换图像 src

【英文标题】：How to have Vue CLI-generated project replace image srcs when the attribute is not src

【发布时间】：2019-09-17 10:42:23

【问题描述】：

使用 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 行为。

【参考方案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
      )
  

【讨论】：

最新的 Vue CLI 3.x bootstrap-vue 插件 (vue-cli-plugin-bootstrap-vue) 现在会自动将它添加到你的 webpack 配置中。