nicco.io/src/components/Image.svelte
2020-11-02 16:02:03 +01:00

35 lines
932 B
Svelte

<script context="module">
const defaultOptions = {
fetchFormat: 'auto',
quality: 'auto:good',
}
</script>
<script>
import { Cloudinary } from 'cloudinary-core'
import { onMount } from 'svelte'
export let src = ''
export let options = {}
export let alt = ''
export let crop = false
let img
let attrs = {}
onMount(() => {
if (crop) {
let { width, height } = window.getComputedStyle(img)
width = (parseInt(width) * window.devicePixelRatio) | 0
height = (parseInt(height) * window.devicePixelRatio) | 0
options = { ...options, width, gravity: 'auto', crop: 'fill' }
}
const cl = Cloudinary.new({ cloud_name: 'cupcakearmy' })
const cleaned = src.replace('https://api.nicco.io', '/nicco')
const all = { ...defaultOptions, ...options }
attrs = cl.imageTag(cleaned, all).attributes()
})
</script>
<img bind:this={img} {...$$restProps} {alt} {...attrs} />