41 lines
1.4 KiB
Plaintext
41 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 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>
|
|
|