Estoy tratando de hacer un juego simple de tirada de dados en VueJs pero tengo problemas para usar las imágenes de dados, siempre da un error 404 y cuando trato de usar require() dice que no está definido
Obtuve una solución usando este método en lugar de usar require() new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href;
código:
aplicación.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>
Principal.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
No puedo encontrar require()
en su código, pero podría probar la declaración de import
:
import { ModuleName } from 'pathname'