Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] image source resolving #1982

Closed
xorbis opened this Issue Aug 3, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@xorbis
Copy link

xorbis commented Aug 3, 2018

https://bootstrap-vue.js.org/docs/reference/images/ refers to transformToRequire but it does not exist anymore. I think it's now transformAssetUrls.

It would also be nice if an example on how to do that with vue-cli and it's vue.config.js.

@tarazena

This comment has been minimized.

Copy link
Contributor

tarazena commented Aug 5, 2018

Finally i was able to get it to work, transformAssetsUrls is what was wrong in the docs
here is what you need to do

  1. create vue.config.js in the root directory (next to package.json).
  2. put the following code
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-carousel-slide': 'img-src',
          'b-embed': 'src'
        };

        return options;
      });
  }
}
@tarazena

This comment has been minimized.

Copy link
Contributor

tarazena commented Aug 5, 2018

and I agree the docs need's to be updated

@xorbis

This comment has been minimized.

Copy link
Author

xorbis commented Aug 6, 2018

Thank you for this solution, I had great hopes but it does not seem to work with this template inside a single file component:
<b-img src="@/assets/img/leadfox.svg">

The path to src still doesn't get interpreted and is inserted as-is.
<img src="@/assets/img/leadfox.svg">

Here is my full vue.config.js generated by the vue-cli.

module.exports = {
	pluginOptions: {
		i18n: {
			locale: "en",
			fallbackLocale: "en",
			localeDir: "locales",
			enableInSFC: true
		}
	},
	baseUrl: "",
	outputDir: undefined,
	assetsDir: "assets",
	runtimeCompiler: true,
	productionSourceMap: false,
	parallel: undefined,
	css: undefined,
	lintOnSave: undefined,
	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-carousel-slide": "img-src",
				"b-embed": "src"
			};

			return options;
		});
	}
};
@xorbis

This comment has been minimized.

Copy link
Author

xorbis commented Aug 6, 2018

Ok it works, I had to restart the vue-cli serve task.
Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.