Vue.js dynamic image src with require is not defined error

Question

I'm trying to bind image src dynamically to a url in a v-for loop as below :

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

But I had the error GET http://localhost:3000/assets/cards/ssbu.jpg 404 (Not Found) although it works fine when I do this : <img src="../assets/cards/ssbu.jpg" :alt="game.gameLabel">.

So i tried using require function as people mentionned in other posts with something like this : <img :src="require(`../assets/cards/${game.gameLabel}.jpg`)" :alt="game.gameLabel"> but there I faced the fatal error ReferenceError: require is not defined.

SO I'm stuck at this point and I need your help in order to resolve this problem.

Thanks in advance.

Answer 1

1. Put your images into the static folder.

2. rename to:

Now you have a cards folder inside the static folder