Select Git revision
Picture.vue 1.57 KiB
<template>
<img :src="sources.normal" :srcset="`${sources.normal} 1x, ${sources.retina} 2x`" @error="handleImageLoadError" :width="width" :height="height" :alt="alt">
</template>
<script>
export default {
data() {
return {
cloudinaryUrl: 'https://res.cloudinary.com/pirati/image/fetch',
hasError: false,
}
},
props: {
src: String,
width: String,
height: String,
alt: String,
lazy: Boolean,
isInView: Boolean,
},
computed: {
sources() {
let normal = `${this.src}?w=720`;
let retina = `${this.src}?w=1440`;
//let normal = `${this.cloudinaryUrl}/${this.cloudinaryTransformations({retina: false})}/${this.src}`;
//let retina = `${this.cloudinaryUrl}/${this.cloudinaryTransformations({retina: true})}/${this.src}`;
//if (process.env.NODE_ENV === 'development' || this.hasError) {
// normal = this.src;
// retina = this.src;
//}
if (this.lazy && !this.isInView) {
normal = '/blank-image.svg';
retina = '/blank-image.svg';
}
return {
normal,
retina,
};
},
},
methods: {
cloudinaryTransformations({retina}) {
let transformations = '';
if (this.width) {
transformations += `w_${retina ? this.width*2 : this.width},`;
}
if (this.height) {
transformations += `h_${retina ? this.height*2 : this.height},`;
}
transformations += `q_auto,f_auto,g_face,c_fill`;
return transformations;
},
handleImageLoadError() {
this.hasError = true;
},
}
};
</script>