回報問題 編輯此頁

組件圖像 src 解析

將相對專案的圖片網址用於 BootstrapVue 自訂組件

vue-loader 會自動將專案相對的 src 屬性轉換為 <img> 標簽，但不會自動轉換為接受圖片 src 網址標籤之 BootstrapVue 自訂組件。

使用 Vue Loader transformAssetUrls 解析圖片路徑

要讓專案自動轉換這些自訂組件的圖片網址，您需要在 webpack 設定中自訂 transformAssetUrls 選項 以供 vue-loader 使用。

transformAssetUrls 的預設值為

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

要允許 BootstrapVue 組件使用相對專案網址，請使用下列組態

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 模組

使用 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>