1
---
2
import path from "node:path";
3
import { Image } from "astro:assets";
4
import { url } from "../../utils/url-utils";
5

6
interface Props {
7
    id?: string;
8
    src: string;
9
    class?: string;
10
    alt?: string;
11
    position?: string;
12
    basePath?: string;
13
    poster?: string;
14
}
15

16
// 解构 Astro.props
17
const {
18
    id,
19
    src,
20
    alt,
21
    position = "center",
22
    basePath = "/",
23
    class: className,
24
    poster,
25
} = Astro.props;
26

27
const imageClass = "w-full h-full object-cover";
28
const imageStyle = `object-position: ${position}`;
29

30
// 判断资源类型
31
const videoExtensions = [".mp4", ".webm", ".ogg"];
32
const cleanSrc = src.split("?")[0];
33
const ext = path.extname(cleanSrc).toLowerCase();
34
const isVideo = videoExtensions.includes(ext);
35

36
// 图片路径判断
37
const isLocal = !(
38
    src.startsWith("/") ||
39
    src.startsWith("http") ||
40
    src.startsWith("https") ||
41
    src.startsWith("data:")
42
);
43
const isPublic = src.startsWith("/");
44

45
// 加载本地图像资源
46
let img;
47
if (isLocal && !isVideo) {
48
    const files = import.meta.glob<ImageMetadata>("../../**", {
49
        import: "default",
50
    });
51
    let normalizedPath = path
52
        .normalize(path.join("../../", basePath, src))
53
        .replace(/\\/g, "/");
54
    const file = files[normalizedPath];
55
    if (!file) {
56
        console.error(
57
            `\n[ERROR] Image file not found: ${normalizedPath.replace("../../", "src/")}`,
58
        );
59
        console.log("Available files:", Object.keys(files));
60
    } else {
61
        img = await file();
62
    }
63
}
64
---
65
<div id={id} class:list={[className, 'overflow-hidden relative']}>
66
    <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
67

68
    {!isVideo && isLocal && img && (
69
            <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle} />
70
    )}
71

72
    {!isVideo && !isLocal && (
73
            <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle} />
74
    )}
75

76
    {isVideo && (
77
            <video
78
                    src={isPublic ? url(src) : src}
79
                    class={imageClass}
80
                    style={imageStyle}
81
                    autoplay
82
                    muted
83
                    loop
84
                    playsinline
85
                    poster={poster}
86
            />
87
    )}
88
</div>