{"version":3,"sources":["webpack:///./src/@core/components/b-card-code/index.js","webpack:///./src/assets/images/banner/banner-6.jpg","webpack:///./src/assets/images/banner/banner-34.jpg","webpack:///./src/views/components/image/Image.vue?fe45","webpack:///./src/views/components/image/ImagesBasic.vue?920a","webpack:///./src/views/components/image/code.js","webpack:///src/views/components/image/ImagesBasic.vue","webpack:///./src/views/components/image/ImagesBasic.vue?a384","webpack:///./src/views/components/image/ImagesBasic.vue","webpack:///./src/views/components/image/ImagesResponsive.vue?f89a","webpack:///src/views/components/image/ImagesResponsive.vue","webpack:///./src/views/components/image/ImagesResponsive.vue?3570","webpack:///./src/views/components/image/ImagesResponsive.vue","webpack:///./src/views/components/image/ImagesThumbnails.vue?4d72","webpack:///src/views/components/image/ImagesThumbnails.vue","webpack:///./src/views/components/image/ImagesThumbnails.vue?c58c","webpack:///./src/views/components/image/ImagesThumbnails.vue","webpack:///./src/views/components/image/ImagesRoundedCorner.vue?9db8","webpack:///src/views/components/image/ImagesRoundedCorner.vue","webpack:///./src/views/components/image/ImagesRoundedCorner.vue?f7e4","webpack:///./src/views/components/image/ImagesRoundedCorner.vue","webpack:///./src/views/components/image/ImagesAlignment.vue?39a1","webpack:///src/views/components/image/ImagesAlignment.vue","webpack:///./src/views/components/image/ImagesAlignment.vue?900c","webpack:///./src/views/components/image/ImagesAlignment.vue","webpack:///./src/views/components/image/ImagesBlank.vue?dbb7","webpack:///src/views/components/image/ImagesBlank.vue","webpack:///./src/views/components/image/ImagesBlank.vue?f414","webpack:///./src/views/components/image/ImagesBlank.vue","webpack:///./src/views/components/image/ImagesLazy.vue?142d","webpack:///src/views/components/image/ImagesLazy.vue","webpack:///./src/views/components/image/ImagesLazy.vue?8a9f","webpack:///./src/views/components/image/ImagesLazy.vue","webpack:///src/views/components/image/Image.vue","webpack:///./src/views/components/image/Image.vue?b209","webpack:///./src/views/components/image/Image.vue"],"names":["BCardCode","module","exports","render","_vm","this","_h","$createElement","_c","_self","staticRenderFns","attrs","scopedSlots","_u","key","fn","_v","_s","codeBasic","proxy","staticClass","codeAlignment","codeBlank","codeResponsive","codeRoundedCorner","codeThumbnails","codeLazy","components","BCardText","BImg","data","component","BContainer","BRow","BCol","_b","mainProps","blank","blankColor","width","height","class","BImgLazy","ImagesBasic","ImagesResponsive","ImagesThumbnails","ImagesRoundedCorner","ImagesAlignment","ImagesBlank","ImagesLazy"],"mappings":"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","file":"js/chunk-fe41652a.91dd9e94.js","sourcesContent":["import BCardCode from './BCardCode.vue'\r\n\r\nexport default BCardCode\r\n","module.exports = __webpack_public_path__ + \"img/banner-6.8e3bf2b9.jpg\";","module.exports = __webpack_public_path__ + \"img/banner-34.61156fc9.jpg\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-row',[_c('b-col',[_c('images-basic'),_c('images-responsive'),_c('images-thumbnails'),_c('images-rounded-corner'),_c('images-alignment'),_c('images-blank'),_c('images-lazy')],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Images\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeBasic)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Documentation and examples for opting images (via \")]),_c('code',[_vm._v(\"<b-img>\")]),_c('span',[_vm._v(\" component) into responsive behavior (so they never become larger than their parent elements), optionally adding lightweight styles to them — all via props. \")])]),_c('b-img',{staticClass:\"w-100\",attrs:{\"src\":require('@/assets/images/banner/banner-6.jpg'),\"fluid\":\"\",\"alt\":\"Responsive image\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export const codeBasic = `\r\n<template>\r\n  <b-img src=\"https://picsum.photos/1024/400/?image=41\" fluid alt=\"Responsive image\" />\r\n</template>\r\n\r\n<script>\r\nimport { BImg } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImg,\r\n  }\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeAlignment = `\r\n<template>\r\n  <div class=\"clearfix\">\r\n    <b-img  left class=\"mb-1 mb-sm-0\" height=\"120\" :src=\"require('@/assets/images/banner/banner-34.jpg\" alt=\"Left image')\"/>\r\n    <b-img right class=\"mb-1 mb-sm-0\" height=\"120\" :src=\"require('@/assets/images/banner/banner-34.jpg\" alt=\"Right image')\"/>\r\n    <b-img center class=\"mb-1 mb-sm-0\" height=\"120\" :src=\"require('@/assets/images/banner/banner-34.jpg\" alt=\"Center image')\"/>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BImg } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImg,\r\n  }\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeBlank = `\r\n<template>\r\n  <div>\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded\r\n      alt=\"Transparent image\"\r\n      class=\"d-inline-block mr-1 mb-1 border\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#5A8DEE\"\r\n      rounded\r\n      alt=\"HEX shorthand color image (#777)\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#475F7B\"\r\n      rounded\r\n      alt=\"Named color image (red)\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#39DA8A\"\r\n      rounded\r\n      alt=\"Named color image (black)\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#FF5B5C\"\r\n      rounded\r\n      alt=\"HEX color image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#FDAC41\"\r\n      alt=\"RGBa color image\"\r\n      rounded\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      blank-color=\"#00CFDD\"\r\n      rounded\r\n      alt=\"HEX shorthand color (#88f)\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BImg } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImg,\r\n  },\r\n  data: () => ({\r\n    mainProps: {\r\n      blank: true,\r\n      width: 75,\r\n      height: 75,\r\n      class: 'm1',\r\n    },\r\n  }),\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeResponsive = `\r\n<template>\r\n  <div>\r\n    <h6>Small image with <code>fluid</code>:</h6>\r\n    <b-img :src=\"require('@/assets/images/water-drop-small.jpg\" fluid alt=\"Fluid image')\" />\r\n\r\n    <h6 class=\"my-1\">Small image with <code>fluid-grow</code>:</h6>\r\n    <b-img :src=\"require('@/assets/images/water-drop-small.jpg\" fluid-grow alt=\"Fluid-grow image')\" />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BImg } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImg,\r\n  },\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeRoundedCorner = `\r\n<template>\r\n  <div>\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded\r\n      alt=\"Rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"top\"\r\n      alt=\"Top-rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"right\"\r\n      alt=\"Right-rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"bottom\"\r\n      alt=\"Bottom-rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"left\"\r\n      alt=\"Left-rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"circle\"\r\n      alt=\"Circle image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n    <b-img\r\n      v-bind=\"mainProps\"\r\n      rounded=\"0\"\r\n      alt=\"Not rounded image\"\r\n      class=\"d-inline-block mr-1 mb-1\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BImg } from 'bootstrap-vue'\r\n\r\nexport default {\r\n BImg, },\r\n  data: () => ({\r\n    mainProps: {\r\n      blank: true,\r\n      blankColor: '#777',\r\n      width: 75,\r\n      height: 75,\r\n      class: 'm1',\r\n    },\r\n  }),\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeThumbnails = `\r\n<template>\r\n  <b-container fluid class=\"p-1 bg-dark\">\r\n    <b-row>\r\n      <b-col>\r\n        <b-img thumbnail fluid :src=\"require('@/assets/images/sky-high.jpg\" alt=\"Image 1')\" />\r\n      </b-col>\r\n      <b-col>\r\n        <b-img thumbnail fluid :src=\"require('@/assets/images/light-house-thumb.jpg\" alt=\"Image 2')\" />\r\n      </b-col>\r\n      <b-col>\r\n        <b-img thumbnail fluid :src=\"require('@/assets/images/border.jpg\" alt=\"Image 3')\" />\r\n      </b-col>\r\n    </b-row>\r\n  </b-container>\r\n</template>\r\n\r\n<script>\r\nimport { BImg, BContainer, BRow, BCol } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImg,\r\n    BContainer,\r\n    BRow,\r\n    BCol,\r\n  },\r\n}\r\n</script>\r\n`\r\n\r\nexport const codeLazy = `\r\n<template>\r\n  <div>\r\n    <b-img-lazy :src=\"require('@/assets/images/banner/banner-6.jpg\" fluid class=\"w-100')\"/>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BImgLazy } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BImgLazy,\r\n  },\r\n}\r\n</script>\r\n`\r\n","<template>\r\n  <b-card-code title=\"Images\">\r\n    <b-card-text>\r\n      <span>Documentation and examples for opting images (via </span>\r\n      <code>&lt;b-img&gt;</code>\r\n      <span>\r\n        component) into responsive behavior (so they never become larger than their parent elements), optionally adding\r\n        lightweight styles to them — all via props.\r\n      </span>\r\n    </b-card-text>\r\n\r\n    <b-img\r\n      :src=\"require('@/assets/images/banner/banner-6.jpg')\"\r\n      fluid\r\n      class=\"w-100\"\r\n      alt=\"Responsive image\"\r\n    />\r\n\r\n    <template #code>\r\n      {{ codeBasic }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImg, BCardText } from 'bootstrap-vue'\r\nimport { codeBasic } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BCardText,\r\n    // eslint-disable-next-line vue/no-unused-components\r\n    BImg,\r\n  },\r\n  data() {\r\n    return {\r\n      codeBasic,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesBasic.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesBasic.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesBasic.vue?vue&type=template&id=1a0ecf76&\"\nimport script from \"./ImagesBasic.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesBasic.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Responsive images\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeResponsive)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Images in BootstrapVue can be made responsive with the \")]),_c('code',[_vm._v(\"fluid\")]),_c('span',[_vm._v(\" prop (which sets \")]),_c('code',[_vm._v(\"max-width: 100%; height: auto;\")]),_c('span',[_vm._v(\" via CSS classes) so that it scales with the parent element - up to the maximum native width of the image. \")])]),_c('div',[_c('h6',[_vm._v(\"Small image with \"),_c('code',[_vm._v(\"fluid\")]),_vm._v(\":\")]),_c('b-img',{attrs:{\"src\":require('@/assets/images/slider/03.jpg'),\"fluid\":\"\",\"alt\":\"Fluid image\"}}),_c('h6',{staticClass:\"my-1\"},[_vm._v(\" Small image with \"),_c('code',[_vm._v(\"fluid-grow\")]),_vm._v(\": \")]),_c('b-img',{attrs:{\"src\":require('@/assets/images/slider/03.jpg'),\"fluid-grow\":\"\",\"alt\":\"Fluid-grow image\"}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Responsive images\">\r\n    <b-card-text>\r\n      <span>Images in BootstrapVue can be made responsive with the </span>\r\n      <code>fluid</code>\r\n      <span> prop (which sets </span>\r\n      <code>max-width: 100%; height: auto;</code>\r\n      <span>\r\n        via CSS classes) so that it scales with the parent element - up to the maximum native width of the image.\r\n      </span>\r\n    </b-card-text>\r\n\r\n    <div>\r\n      <h6>Small image with <code>fluid</code>:</h6>\r\n      <b-img\r\n        :src=\"require('@/assets/images/slider/03.jpg')\"\r\n        fluid\r\n        alt=\"Fluid image\"\r\n      />\r\n\r\n      <h6 class=\"my-1\">\r\n        Small image with <code>fluid-grow</code>:\r\n      </h6>\r\n      <b-img\r\n        :src=\"require('@/assets/images/slider/03.jpg')\"\r\n        fluid-grow\r\n        alt=\"Fluid-grow image\"\r\n      />\r\n    </div>\r\n\r\n    <template #code>\r\n      {{ codeResponsive }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImg, BCardText } from 'bootstrap-vue'\r\nimport { codeResponsive } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BCardText,\r\n    // eslint-disable-next-line vue/no-unused-components\r\n    BImg,\r\n  },\r\n  data() {\r\n    return {\r\n      codeResponsive,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesResponsive.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesResponsive.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesResponsive.vue?vue&type=template&id=1b3cdfa6&\"\nimport script from \"./ImagesResponsive.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesResponsive.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Image thumbnails\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeThumbnails)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"You can use prop \")]),_c('code',[_vm._v(\"thumbnail\")]),_c('span',[_vm._v(\"to give an image a rounded light border appearance.\")])]),_c('b-container',{staticClass:\"p-1 bg-dark\",attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',[_c('b-img',{attrs:{\"thumbnail\":\"\",\"fluid\":\"\",\"src\":require('@/assets/images/avatars/1.png'),\"alt\":\"Image 1\"}})],1),_c('b-col',[_c('b-img',{attrs:{\"thumbnail\":\"\",\"fluid\":\"\",\"src\":require('@/assets/images/avatars/2.png'),\"alt\":\"Image 2\"}})],1),_c('b-col',[_c('b-img',{attrs:{\"thumbnail\":\"\",\"fluid\":\"\",\"src\":require('@/assets/images/avatars/3.png'),\"alt\":\"Image 3\"}})],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Image thumbnails\">\r\n    <b-card-text>\r\n      <span>You can use prop </span>\r\n      <code>thumbnail</code>\r\n      <span>to give an image a rounded light border appearance.</span>\r\n    </b-card-text>\r\n\r\n    <b-container\r\n      fluid\r\n      class=\"p-1 bg-dark\"\r\n    >\r\n      <b-row>\r\n        <b-col>\r\n          <b-img\r\n            thumbnail\r\n            fluid\r\n            :src=\"require('@/assets/images/avatars/1.png')\"\r\n            alt=\"Image 1\"\r\n          />\r\n        </b-col>\r\n        <b-col>\r\n          <b-img\r\n            thumbnail\r\n            fluid\r\n            :src=\"require('@/assets/images/avatars/2.png')\"\r\n            alt=\"Image 2\"\r\n          />\r\n        </b-col>\r\n        <b-col>\r\n          <b-img\r\n            thumbnail\r\n            fluid\r\n            :src=\"require('@/assets/images/avatars/3.png')\"\r\n            alt=\"Image 3\"\r\n          />\r\n        </b-col>\r\n      </b-row>\r\n    </b-container>\r\n\r\n    <template #code>\r\n      {{ codeThumbnails }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport {\r\n  BImg, BContainer, BRow, BCol, BCardText,\r\n} from 'bootstrap-vue'\r\nimport { codeThumbnails } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BImg,\r\n    BContainer,\r\n    BCardText,\r\n    BRow,\r\n    BCol,\r\n  },\r\n  data() {\r\n    return {\r\n      codeThumbnails,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesThumbnails.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesThumbnails.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesThumbnails.vue?vue&type=template&id=fda6d006&\"\nimport script from \"./ImagesThumbnails.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesThumbnails.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Rounded corners\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeRoundedCorner)+\" \")]},proxy:true}])},[_c('b-card-text',{staticClass:\"mb-0\"},[_c('span',[_vm._v(\"You can control which corners are rounded by setting the rounded prop to one of the following values:\")]),_c('code',[_vm._v(\"true,false,top,right,bottom,left,circle,0\")])]),_c('div',{staticClass:\"demo-inline-spacing\"},[_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"\",\"alt\":\"Rounded image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"top\",\"alt\":\"Top-rounded image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"right\",\"alt\":\"Right-rounded image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"bottom\",\"alt\":\"Bottom-rounded image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"left\",\"alt\":\"Left-rounded image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"circle\",\"alt\":\"Circle image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"rounded\":\"0\",\"alt\":\"Not rounded image\"}},'b-img',_vm.mainProps,false))],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Rounded corners\">\r\n    <b-card-text class=\"mb-0\">\r\n      <span>You can control which corners are rounded by setting the rounded prop to one of the following values:</span>\r\n      <code>true,false,top,right,bottom,left,circle,0</code>\r\n    </b-card-text>\r\n\r\n    <div class=\"demo-inline-spacing\">\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded\r\n        alt=\"Rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"top\"\r\n        alt=\"Top-rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"right\"\r\n        alt=\"Right-rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"bottom\"\r\n        alt=\"Bottom-rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"left\"\r\n        alt=\"Left-rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"circle\"\r\n        alt=\"Circle image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded=\"0\"\r\n        alt=\"Not rounded image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n    </div>\r\n\r\n    <template #code>\r\n      {{ codeRoundedCorner }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImg, BCardText } from 'bootstrap-vue'\r\nimport { codeRoundedCorner } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BImg,\r\n    BCardText,\r\n  },\r\n  data() {\r\n    return {\r\n      mainProps: {\r\n        blank: true,\r\n        blankColor: '#777',\r\n        width: 75,\r\n        height: 75,\r\n        class: 'm1',\r\n      },\r\n      codeRoundedCorner,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesRoundedCorner.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesRoundedCorner.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesRoundedCorner.vue?vue&type=template&id=eaec932a&\"\nimport script from \"./ImagesRoundedCorner.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesRoundedCorner.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Aligning images\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeAlignment)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Align images with the boolean props \")]),_c('code',[_vm._v(\"left\")]),_c('span',[_vm._v(\" (floats left) \")]),_c('code',[_vm._v(\"right\")]),_c('span',[_vm._v(\"(floats right), and \")]),_c('code',[_vm._v(\"center\")]),_c('span',[_vm._v(\"(auto left+right margins). You can also center images by placing them in a container that has the class \")]),_c('code',[_vm._v(\"text-center.\")])]),_c('div',{staticClass:\"clearfix\"},[_c('b-img',{staticClass:\"mb-1 mb-sm-0\",attrs:{\"left\":\"\",\"height\":\"120\",\"src\":require('@/assets/images/banner/banner-34.jpg'),\"alt\":\"Left image\"}}),_c('b-img',{staticClass:\"mb-1 mb-sm-0\",attrs:{\"right\":\"\",\"height\":\"120\",\"src\":require('@/assets/images/banner/banner-34.jpg'),\"alt\":\"Right image\"}}),_c('b-img',{staticClass:\"mb-1 mb-sm-0\",attrs:{\"center\":\"\",\"height\":\"120\",\"src\":require('@/assets/images/banner/banner-34.jpg'),\"alt\":\"Center image\"}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Aligning images\">\r\n    <b-card-text>\r\n      <span>Align images with the boolean props </span>\r\n      <code>left</code>\r\n      <span> (floats left) </span>\r\n      <code>right</code>\r\n      <span>(floats right), and </span>\r\n      <code>center</code>\r\n      <span>(auto left+right margins). You can also center images by placing them in a container that has the class\r\n      </span>\r\n      <code>text-center.</code>\r\n    </b-card-text>\r\n\r\n    <div class=\"clearfix\">\r\n      <b-img\r\n        left\r\n        class=\"mb-1 mb-sm-0\"\r\n        height=\"120\"\r\n        :src=\"require('@/assets/images/banner/banner-34.jpg')\"\r\n        alt=\"Left image\"\r\n      />\r\n      <b-img\r\n        right\r\n        class=\"mb-1 mb-sm-0\"\r\n        height=\"120\"\r\n        :src=\"require('@/assets/images/banner/banner-34.jpg')\"\r\n        alt=\"Right image\"\r\n      />\r\n      <b-img\r\n        center\r\n        class=\"mb-1 mb-sm-0\"\r\n        height=\"120\"\r\n        :src=\"require('@/assets/images/banner/banner-34.jpg')\"\r\n        alt=\"Center image\"\r\n      />\r\n    </div>\r\n\r\n    <template #code>\r\n      {{ codeAlignment }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImg, BCardText } from 'bootstrap-vue'\r\nimport { codeAlignment } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BCardText,\r\n    // eslint-disable-next-line vue/no-unused-components\r\n    BImg,\r\n  },\r\n  data() {\r\n    return {\r\n      codeAlignment,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesAlignment.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesAlignment.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesAlignment.vue?vue&type=template&id=93dffb20&\"\nimport script from \"./ImagesAlignment.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesAlignment.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Blank (or solid color) images\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeBlank)+\" \")]},proxy:true}])},[_c('b-card-text',{staticClass:\"mb-0\"},[_c('code',[_vm._v(\"<b-img>\")]),_c('span',[_vm._v(\" provides built-in support for generating blank images (transparent by default) of any width and height, by setting the \")]),_c('code',[_vm._v(\"blank\")]),_c('span',[_vm._v(\" prop, and specifying \")]),_c('code',[_vm._v(\"width\")]),_c('span',[_vm._v(\" and \")]),_c('code',[_vm._v(\"height\")]),_c('span',[_vm._v(\"values (in pixels). You can apply any of the other \")]),_c('code',[_vm._v(\"<b-img>\")]),_c('span',[_vm._v(\" props to change the style/behavior of the generated image.\")])]),_c('div',{staticClass:\"demo-inline-spacing\"},[_c('b-img',_vm._b({staticClass:\"d-inline-block border\",attrs:{\"rounded\":\"\",\"alt\":\"Transparent image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#5A8DEE\",\"rounded\":\"\",\"alt\":\"HEX shorthand color image (#777)\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#82868b\",\"rounded\":\"\",\"alt\":\"Named color image (red)\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#39DA8A\",\"rounded\":\"\",\"alt\":\"Named color image (black)\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#FDAC41\",\"alt\":\"RGBa color image\",\"rounded\":\"\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#FF5B5C\",\"rounded\":\"\",\"alt\":\"HEX color image\"}},'b-img',_vm.mainProps,false)),_c('b-img',_vm._b({staticClass:\"d-inline-block\",attrs:{\"blank-color\":\"#00CFDD\",\"rounded\":\"\",\"alt\":\"HEX shorthand color (#88f)\"}},'b-img',_vm.mainProps,false))],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Blank (or solid color) images\">\r\n    <b-card-text class=\"mb-0\">\r\n      <code>&lt;b-img&gt;</code>\r\n      <span>\r\n        provides built-in support for generating blank images (transparent by default) of any width and height, by\r\n        setting the\r\n      </span>\r\n      <code>blank</code>\r\n      <span> prop, and specifying </span>\r\n      <code>width</code>\r\n      <span> and </span>\r\n      <code>height</code>\r\n      <span>values (in pixels). You can apply any of the other </span>\r\n      <code>&lt;b-img&gt;</code>\r\n      <span> props to change the style/behavior of the generated image.</span>\r\n    </b-card-text>\r\n\r\n    <div class=\"demo-inline-spacing\">\r\n\r\n      <!--transparent img -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        rounded\r\n        alt=\"Transparent image\"\r\n        class=\"d-inline-block border\"\r\n      />\r\n\r\n      <!-- primary color  -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#5A8DEE\"\r\n        rounded\r\n        alt=\"HEX shorthand color image (#777)\"\r\n        class=\"d-inline-block\"\r\n      />\r\n\r\n      <!-- secondary -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#82868b\"\r\n        rounded\r\n        alt=\"Named color image (red)\"\r\n        class=\"d-inline-block\"\r\n      />\r\n\r\n      <!-- success -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#39DA8A\"\r\n        rounded\r\n        alt=\"Named color image (black)\"\r\n        class=\"d-inline-block\"\r\n      />\r\n\r\n      <!-- warning -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#FDAC41\"\r\n        alt=\"RGBa color image\"\r\n        rounded\r\n        class=\"d-inline-block\"\r\n      />\r\n\r\n      <!-- danger -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#FF5B5C\"\r\n        rounded\r\n        alt=\"HEX color image\"\r\n        class=\"d-inline-block\"\r\n      />\r\n\r\n      <!-- info -->\r\n      <b-img\r\n        v-bind=\"mainProps\"\r\n        blank-color=\"#00CFDD\"\r\n        rounded\r\n        alt=\"HEX shorthand color (#88f)\"\r\n        class=\"d-inline-block\"\r\n      />\r\n    </div>\r\n\r\n    <template #code>\r\n      {{ codeBlank }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImg, BCardText } from 'bootstrap-vue'\r\nimport { codeBlank } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BCardText,\r\n    BImg,\r\n  },\r\n  data() {\r\n    return {\r\n      mainProps: {\r\n        blank: true,\r\n        width: 75,\r\n        height: 75,\r\n        class: 'm1',\r\n      },\r\n      codeBlank,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesBlank.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesBlank.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesBlank.vue?vue&type=template&id=52f6a7e4&\"\nimport script from \"./ImagesBlank.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesBlank.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Lazy loaded images\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeLazy)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Use our complementary \")]),_c('code',[_vm._v(\"<b-img-lazy>\")]),_c('span',[_vm._v(\" image component (based on \")]),_c('code',[_vm._v(\"<b-img>\")]),_c('span',[_vm._v(\") to lazy load images as they are scrolled into view (or within \")]),_c('code',[_vm._v(\"offset\")]),_c('span',[_vm._v(\" pixels of the viewport).\")])]),_c('b-img-lazy',{staticClass:\"w-100\",attrs:{\"src\":require('@/assets/images/banner/banner-6.jpg'),\"fluid\":\"\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Lazy loaded images\">\r\n    <b-card-text>\r\n      <span>Use our complementary </span>\r\n      <code>&lt;b-img-lazy&gt;</code>\r\n      <span> image component (based on </span>\r\n      <code>&lt;b-img&gt;</code>\r\n      <span>) to lazy load images as they are scrolled into view (or within </span>\r\n      <code>offset</code>\r\n      <span> pixels of the viewport).</span>\r\n    </b-card-text>\r\n\r\n    <b-img-lazy\r\n      :src=\"require('@/assets/images/banner/banner-6.jpg')\"\r\n      fluid\r\n      class=\"w-100\"\r\n    />\r\n\r\n    <template #code>\r\n      {{ codeLazy }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code'\r\nimport { BImgLazy, BCardText } from 'bootstrap-vue'\r\nimport { codeLazy } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    // eslint-disable-next-line vue/no-unused-components\r\n    BImgLazy,\r\n    BCardText,\r\n  },\r\n  data() {\r\n    return {\r\n      codeLazy,\r\n    }\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesLazy.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagesLazy.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImagesLazy.vue?vue&type=template&id=7f5c8915&\"\nimport script from \"./ImagesLazy.vue?vue&type=script&lang=js&\"\nexport * from \"./ImagesLazy.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <b-row>\r\n    <b-col>\r\n      <images-basic />\r\n      <images-responsive />\r\n      <images-thumbnails />\r\n      <images-rounded-corner />\r\n      <images-alignment />\r\n      <images-blank />\r\n      <images-lazy />\r\n    </b-col>\r\n  </b-row>\r\n</template>\r\n\r\n<script>\r\nimport { BRow, BCol } from 'bootstrap-vue'\r\n\r\nimport ImagesBasic from './ImagesBasic.vue'\r\nimport ImagesResponsive from './ImagesResponsive.vue'\r\nimport ImagesThumbnails from './ImagesThumbnails.vue'\r\nimport ImagesRoundedCorner from './ImagesRoundedCorner.vue'\r\nimport ImagesAlignment from './ImagesAlignment.vue'\r\nimport ImagesBlank from './ImagesBlank.vue'\r\nimport ImagesLazy from './ImagesLazy.vue'\r\n\r\nexport default {\r\n  components: {\r\n    BRow,\r\n    BCol,\r\n\r\n    ImagesBasic,\r\n    ImagesResponsive,\r\n    ImagesThumbnails,\r\n    ImagesRoundedCorner,\r\n    ImagesAlignment,\r\n    ImagesBlank,\r\n    ImagesLazy,\r\n  },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Image.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Image.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Image.vue?vue&type=template&id=2d532be0&\"\nimport script from \"./Image.vue?vue&type=script&lang=js&\"\nexport * from \"./Image.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}