I'm trying to make a simple dice roll game in VueJs but i'm having problems to use the dice images, it always gives 404 error and when i try to use require() it says it's not defined

Got a solution by using this method instead of using require() new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href;

code:

App.vue

<template>
  <div>
    <button @click="roll">roll</button>
    <p> Resultado: {{dice}} </p>
    <div v-if="dice != 0">
      <img :src="selected"/>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        img: [
          '@/components/icons/dice1.png',
          '@/components/icons/dice2.png',
          '@/components/icons/dice3.png',
          '@/components/icons/dice4.png',
          '@/components/icons/dice5.png',
          '@/components/icons/dice6.png',
        ],
        selected: '',
        dice: 0,
      }
    },
    created(){
      this.selected = this.img[1];
    },methods:{
      roll: function(){
      this.dice = Math.ceil(Math.random() *6);
      this.select = this.img[this.dice];
      console.log(this.img[this.dice]);
      }
    }
  }
</script>

Main.js

import { createApp } from 'vue'
import App from './App.vue'


import './assets/main.css'

createApp(App).mount('#app')