Skip to content

Commit

Permalink
Add image component
Browse files Browse the repository at this point in the history
benjick committed Aug 2, 2019
1 parent 4dd46e4 commit 647f578
Showing 2 changed files with 42 additions and 0 deletions.
40 changes: 40 additions & 0 deletions packages/vsf-storyblok-module/components/Img.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<img v-if="lazy" :class="classes" v-lazy="image">
<img v-else :class="classes" :src="image">
</template>

<script>
export default {
name: 'StoryblokImage',
computed: {
image () {
const { images } = this.$store.state.config
const src = this.src.substring(0, 2) === '//' ? `https:${this.src}` : this.src
const imageUrl = `${images.baseUrl}?url=${src}&width=${this.width}&height=${this.height}&action=fit`
return imageUrl
}
},
props: {
height: {
type: Number,
default: 800
},
width: {
type: Number,
default: 600
},
src: {
type: String,
required: true
},
lazy: {
type: Boolean,
default: true
},
classes: {
type: [String, Array, Object],
default: ''
}
}
}
</script>
2 changes: 2 additions & 0 deletions packages/vsf-storyblok-module/hooks/beforeRegistration.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { router } from '@vue-storefront/core/app'
import { RouterManager } from '@vue-storefront/core/lib/router-manager'
import { setupMultistoreRoutes } from '@vue-storefront/core/lib/multistore'
import Render from '../components/Render.vue'
import Img from '../components/Img.vue'
import { StoryblokRoutes } from '../pages/routes'
import { getSettings } from '../helpers'

@@ -28,6 +29,7 @@ function beforeRegistration ({ Vue, config, store }) {

Vue.use(StoryblokVue)
Vue.component('sb-render', Render)
Vue.component('sb-img', Img)
}

export { beforeRegistration }

0 comments on commit 647f578

Please sign in to comment.