feat: vite-assets

src/pages/Page/vite-assets/index.page.vue

@@ -0,0 +1,46 @@
+<!--
+ https://cn.vitejs.dev/guide/#new-url-url-import-meta-url
+-->
+<script setup lang="ts">
+function getImageUrl(name: string) {
+  return new URL(`./imgs/img_${name}.png`, import.meta.url).href;
+}
+
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
+</script>
+
+<template>
+  <div>
+    <div b="1px solid pink">
+      getImageUrl('1'): {{ getImageUrl('1') }}
+      <img :src="getImageUrl('1')" alt="img_1" />
+    </div>
+    <br />
+    <div b="1px solid pink">
+      getImageUrl('2'): {{ getImageUrl('2') }}
+      <img :src="getImageUrl('2')" alt="img_2" />
+    </div>
+  </div>
+  <div class="space-y-4" p="4" b="1px solid pink" mt-4>
+    <h3>img_modules</h3>
+    <div v-for="(img, name) in img_modules" :key="name" b="1px solid pink">
+      <p>name: {{ name }}</p>
+      <img :src="img.default" :alt="name" />
+    </div>
+    <pre class="text-left">img_modules :>> {{ JSON.stringify(img_modules, null, 2) }}</pre>
+  </div>
+</template>
+
+<style scoped>
+img {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  height: 40px;
+}
+pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>