0

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.

hitaton
  • 103
  • 2
  • 15
  • Does this answer your question? [How to solve require is not defined?](https://stackoverflow.com/questions/53667055/how-to-solve-require-is-not-defined) – Debug Diva May 11 '22 at 16:13
  • I dont know, I dont understand what I need to add and where and I do not use laravel either. – hitaton May 11 '22 at 16:26
  • 1
    Looks like there is a workaround to achieve this by adding your image files to public folder instead of assets. Can you please give a try and check ? – Debug Diva May 11 '22 at 16:32
  • This workaround is working, thank you. But what is the downside of putting img in public and for what work the folder is usually used ? Like what are the guidelines in using this folder ? – hitaton May 11 '22 at 16:42
  • If using `vite`, you can use cdn for your files or importing them in your `vue` script. But if using `webpack`, you have to use `require('...')` on dynamic sources. [more info](https://stackoverflow.com/a/71135980/15896638) – Pouya M May 11 '22 at 17:35

1 Answers1

0

  1. Put your images into the static folder.

  2. rename to:

Now you have a cards folder inside the static folder

bill.gates
  • 14,145
  • 3
  • 19
  • 47