Estoy tratando de vincular la imagen src dinámicamente a una URL en un bucle v-for como se muestra a continuación:

 <script> export default { name: 'Home', data() { return { games: [ {"gameId": 1365, "gameLabel": "ssbu"}, {"gameId": 1366, "gameLabel": "ggs"}, {"gameId": 1367, "gameLabel": "sf5"}, ] } } }; </script> <template> <div v-for="game in games""> <img :src="`../assets/cards/${game.gameLabel}.jpg`" :alt="game.gameLabel"> </div> </template>

Pero tuve el error GET http://localhost:3000/assets/cards/ssbu.jpg 404 (Not Found) aunque funciona bien cuando hago esto: <img src="../assets/cards/ssbu.jpg" :alt="game.gameLabel"> .

Así que intenté usar la función require como la gente mencionó en otras publicaciones con algo como esto: <img :src="require(`../assets/cards/${game.gameLabel}.jpg`)" :alt="game.gameLabel"> pero allí me enfrenté al error fatal ReferenceError: require is not defined .

SO Estoy atascado en este punto y necesito su ayuda para resolver este problema.

Gracias por adelantado.