<!--
 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 });

function getRandom2or3() {
  return Math.random() < 0.5 ? '2' : '3';
}

function getRandomImage() {
  return getImageUrl(getRandom2or3());
}
</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>
    <br />
    <div b="1px solid pink">
      getRandomImage(): {{ getRandomImage() }}
      <img :src="getRandomImage()" alt="img_random" />
    </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>
