I'm trying to import a group of static png images for use in a vue app. I'm currently importing each one individually and loading into a single data array. Surely there must be a more efficient way to do this, some sort of mapping or something like [...Array(12)].forEach((_, i) => import eval("url"+i) from '@/assets/thumbnails/'+(i+1)+'.png'. What is the proper way to efficiently load a list of images like this? Here's what I have:

import url1 from '@/assets/thumbnails/1.png';
import url2 from '@/assets/thumbnails/2.png';
import url3 from '@/assets/thumbnails/3.png';
import url4 from '@/assets/thumbnails/4.png';
import url5 from '@/assets/thumbnails/5.png';
import url6 from '@/assets/thumbnails/6.png';
import url7 from '@/assets/thumbnails/7.png';
import url8 from '@/assets/thumbnails/8.png';
import url9 from '@/assets/thumbnails/9.png';
import url10 from '@/assets/thumbnails/10.png';
import url11 from '@/assets/thumbnails/11.png';
import url12 from '@/assets/thumbnails/12.png';

export default {
  name: 'TrajSelectPanel',
  
  data() {
    return {
      urls: [url1, url2, url3, url4, url5, url6, url7, url8, url9, url10, url11, url12]
    }
  },
// rest of vue component
}

and here's my html for the component:

<template>
  <div class='main'></div>
  <div class='thumbRow' v-for='odx in 4' :key='odx'>
    <img :class='["thumb", idx === 3 ? "right" : "" ]' 
    v-for='idx in 3' 
    :src="urls[3 * (odx-1) + (idx-1)]" 
    :key='idx'
    :id='"id" + ((idx-1) + 3*(odx-1))'
    @click='selectIcon'
    />
  </div>
</template>