問題を報告するこのページを編集する

コンポーネントimg srcの解決

BootstrapVueカスタムコンポーネントのプロジェクト相対画像URLの使用

vue-loaderはプロジェクト相対のsrc属性を<img>タグで自動的に変換しますが、画像src URLタグを受け入れるBootstrapVueカスタムコンポーネントでは自動的には行いません。

Vue Loader transformAssetUrlsによるimgパスの解決

プロジェクトでこれらのカスタムコンポーネントの画像URLを変換するには、Webpack設定で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ではVueアプリのWebpackコンパイル方法が変更されました。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ファイルのbuildセクションに以下を追加します。

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による画像パスの解決

ビューローダーの設定でtransformAssetUrlsを設定できない場合は、代わりにrequireメソッドを使用できます。

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

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