Estoy tratando de importar un grupo de imágenes png estáticas para usar en una aplicación vue. Actualmente estoy importando cada uno individualmente y cargándolos en una sola matriz de datos. Seguramente debe haber una forma más eficiente de hacer esto, algún tipo de mapeo o algo como [...Array(12)].forEach((_, i) => import eval("url"+i) from '@/assets/thumbnails/'+(i+1)+'.png' es la forma correcta de cargar eficientemente una lista de imágenes como esta?Esto es lo que tengo:

 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 }

y aquí está mi html para el componente:

 <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>