报告问题编辑此页面

组件 img src 解析

为 BootstrapVue 自定义组件使用项目相对图像 URL

vue-loader 会自动转换 src 属性上的项目相对 <img> 标记，但不会自动转换接受图像 src url 标记的 BootstrapVue 自定义组件。

Vue Loader transformAssetUrls 用于解析 img 路径

要让你的项目转换这些自定义组件图像 URL，你需要在 webpack 配置中为 vue-loader 自定义 transformAssetUrls 选项。

transformAssetUrls 的默认值为

const options = {
  transformAssetUrls: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

为了允许 BootstrapVue 组件使用项目相对 URL，请使用以下配置

const options = {
  transformAssetUrls: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href',
    'b-avatar': 'src',
    'b-img': 'src',
    'b-img-lazy': ['src', 'blank-src'],
    'b-card': 'img-src',
    'b-card-img': 'src',
    'b-card-img-lazy': ['src', 'blank-src'],
    'b-carousel-slide': 'img-src',
    'b-embed': 'src'
  }
}

这将允许你在 .vue 文件中使用以下格式

<b-img src="~/static/picture.jpg"></b-img>

<b-card-img src="~/static/picture.jpg"></b-card-img>

Vue CLI 3 支持

Vue CLI 3 改变了 webpack 编译 Vue 应用程序的方式，为了让 BootstrapVue 再次工作，你需要执行以下步骤

  1. 在根目录（紧挨着 package.json）中创建 vue.config.js。
  2. 放入以下代码
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transformAssetUrls = {
          img: 'src',
          image: 'xlink:href',
          'b-avatar': 'src',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }

        return options
      })
  }
}

在 Nuxt.js 中配置 transformAssetUrls

在你的 nuxt.config.js 文件中，将以下内容添加到你的构建部分

module.exports = {
  build: {
    extend(config) {
      const vueLoader = config.module.rules.find(rule => rule.loader === 'vue-loader')
      vueLoader.options.transformAssetUrls = {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href',
        'b-avatar': 'src',
        'b-img': 'src',
        'b-img-lazy': ['src', 'blank-src'],
        'b-card': 'img-src',
        'b-card-img': 'src',
        'b-card-img-lazy': ['src', 'blank-src'],
        'b-carousel-slide': 'img-src',
        'b-embed': 'src'
      }
    }
  }
}

如果在 Nuxt.js 中使用 BootstrapVue Nuxt 模块，插件模块将自动为你添加 BootstrapVue 特定的 transformAssetUrls 配置。

使用 require 解析图像路径

如果你无法在 view-loader 配置中设置 transformAssetUrls，你可以使用 require 方法

<b-img :src="require('../static/picture.jpg')"></b-img>

<b-card-img :src="require('../static/picture.jpg')"></b-card-img>