vue-loader automatically converts project relative
src
attributes on<img>
tags, but doesn't automatically for Bootrap-Vue custom components that accept image src url tags.
transformToRequire
to resolve img pathsTo have your project convert these custom component image URLs for you, you will need to
customize the transformToRequire
option
for vue-loader
in your webpack config.
The default value for transformToRequire
is:
transformToRequire: {
'img': 'src',
'image': 'xlink:href'
}
To allow Bootstrap-Vue components to use project relative URLs, use the following configuration:
transformToRequire: {
'img': 'src',
'image': 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
This will allow you to use the following format in your .vue
files:
<b-img src="~/static/picture.jpg" />
<b-card-img img-src="~/static/picture.jpg" />
transformToRequire
in NuxtIn your nuxt.config.js
file, add the following to your build section:
build: {
extend (config, ctx) {
const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
vueLoader.options.transformToRequire = {
'img': 'src',
'image': 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
}
}
require
to resolve image pathsIf you cannot set the transforToRequire
in your view-loader config, you
can alternatively use the require
method:
<b-img :src="require('../static/picture.jpg')" />
<b-card-img :img-src="require('../static/picture.jpg')" />