42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
component OptimizedImage {
|
|
outputs {
|
|
load(payload: { sourceEvent: Event; src: string })
|
|
error(payload: { sourceEvent: Event; src: string })
|
|
}
|
|
props {
|
|
src: string = ""
|
|
srcset: string = ""
|
|
sizes: string = ""
|
|
alt: string = ""
|
|
width: string = ""
|
|
height: string = ""
|
|
loading: string = "lazy"
|
|
decoding: string = "async"
|
|
fetchpriority: string = "auto"
|
|
placeholder: string = ""
|
|
objectFit: string = "cover"
|
|
rounded: boolean = false
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
view {
|
|
<img
|
|
{...attrs}
|
|
src='{src}'
|
|
srcset='{srcset}'
|
|
sizes='{sizes}'
|
|
alt='{alt}'
|
|
width='{width}'
|
|
height='{height}'
|
|
loading='{loading}'
|
|
decoding='{decoding}'
|
|
fetchpriority='{fetchpriority}'
|
|
style='object-fit:{objectFit};background-image:{placeholder ? "url(" + placeholder + ")" : "none"};background-size:cover'
|
|
class='wrn-next wrn-next--color-{color} wrn-next--size-{size} max-w-full {rounded ? "rounded-[var(--wrn-radius-sm)]" : ""} {class}'
|
|
@load='output.load({ sourceEvent: event, src: src })'
|
|
@error='output.error({ sourceEvent: event, src: src })'
|
|
/>
|
|
}
|
|
}
|