BlIllustrationAv

BlIllustrationAv is a Vue component that will render illustration as PNG

TIP

The request for assets will through Akamai and Imagery

How to Use

Default import BlIllustrationAv

BlIllustrationAv will act as component wrapper that will do the request for assets

Props

Prop	Type	Default	Description
name	String	-	Illustration Name ex: 'img_medium_fun_success'
url	String	-	Original URL for image source
size	String	original	Size that will custom the URL path ex: 's-100-100'
isLazyLoad	Boolean	false	Whether the image has lazy load or not
srcPlaceholder	String	https://s2.bukalapak.com/attachment/237412/placeholder.png	Only for lazy load, it will be shown until the src image is loaded. Useful for progressive image loading

Event

Event	Callback	Description
loaded	name	Emit event when image loaded
failed	name	Emit event when image failed

• App.vue

<template>
  <div>
    <BlIllustrationAv 
      name="img_medium_fun_success"
      alt="illustration"
      @click="handleClick"
      @loaded="handleLoad"
      @failed="handleFailed"
    />
  </div>
</template>

<script>
import BlIllustrationAv from '@bukalapak/bazaar-visual/dist/components/BlIllustrationAv'

export default {
  name: "App",
  components: {
    BlIllustrationAv, 
  },
  methods: {
    handleClick() {
      console.log('image clicked')
    },
    handleLoad(name) {
      console.log('image loaded: ', name)
    },
    handleFailed(name) {
      console.log('image failed: ', name)
    }
  }
};
</script>

• App.vue with lazy load

<template>
  <div>
    <BlIllustrationAv 
      is-lazy-load
      url="https://s0.bukalapak.com/illustration/original/img_medium_fun_success.png"
      alt="lazy load illustration"
      src-placeholder="https://s2.bukalapak.com/attachment/237412/placeholder.png"
      @click.native="handleClick"
      @loaded="handleLoad"
      @failed="handleFailed"
    />
  </div>
</template>

<script>
import BlIllustrationAv from '@bukalapak/bazaar-visual/dist/components/BlIllustrationAv'

export default {
  name: "App",
  components: {
    BlIllustrationAv, 
  },
  methods: {
    handleClick() {
      console.log('image clicked')
    },
    handleLoad(name) {
      console.log('image loaded: ', name)
    },
    handleFailed(name) {
      console.log('image failed: ', name)
    }
  }
};
</script>