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.

Does this answer your question? How to solve require is not defined? — Rohìt Jíndal
– Rohìt Jíndal, Commented May 11, 2022 at 16:13
I dont know, I dont understand what I need to add and where and I do not use laravel either. — hitaton
– hitaton, Commented May 11, 2022 at 16:26
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 ? — Rohìt Jíndal
– Rohìt Jíndal, Commented May 11, 2022 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
– hitaton, Commented May 11, 2022 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 — Pouya M
– Pouya M, Commented May 11, 2022 at 17:35

Ilijanovic · Accepted Answer · 2022-05-11 17:27:47Z

0

Put your images into the static folder.
rename to:

Now you have a cards folder inside the static folder

answered May 11, 2022 at 17:27

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related