50 lines
1.4 KiB
Plaintext
50 lines
1.4 KiB
Plaintext
---
|
|
import path from 'path'
|
|
interface Props {
|
|
id?: string
|
|
src: string
|
|
class?: string
|
|
alt?: string
|
|
position?: string
|
|
basePath?: string
|
|
}
|
|
import { Image } from 'astro:assets'
|
|
import { url } from '../../utils/url-utils'
|
|
|
|
const { id, src, alt, position = 'center', basePath = '/' } = Astro.props
|
|
const className = Astro.props.class
|
|
|
|
const isLocal = !(
|
|
src.startsWith('/') ||
|
|
src.startsWith('http') ||
|
|
src.startsWith('https') ||
|
|
src.startsWith('data:')
|
|
)
|
|
const isPublic = src.startsWith('/')
|
|
|
|
// TODO temporary workaround for images dynamic import
|
|
// https://github.com/withastro/astro/issues/3373
|
|
let img
|
|
if (isLocal) {
|
|
const files = import.meta.glob<ImageMetadata>('../../**', {
|
|
import: 'default',
|
|
})
|
|
let normalizedPath = path
|
|
.normalize(path.join('../../', basePath, src))
|
|
.replace(/\\/g, '/')
|
|
img = await files[normalizedPath]()
|
|
if (!img) {
|
|
console.error(`No image found for path ${normalizedPath}`)
|
|
}
|
|
}
|
|
|
|
const imageClass = 'w-full h-full object-cover'
|
|
const imageStyle = `object-position: ${position}`
|
|
---
|
|
<div id={id} class:list={[className, 'overflow-hidden relative']}>
|
|
<div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
|
|
{isLocal && img && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
|
|
{!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
|
|
</div>
|
|
|