How to make dynamic images appear in vue with vuejs?

Question

I have created a db where all the games are stored. In the js part I'm sending a request for getting all games, then putting the result into games[] list. When I'm trying to assign the images that are stored in db, in js games[index]['cover_img'], they are not showing.

        <div class="all_games">
        <div class="game" v-for='(val, index) in games' :key='index'>  
        <img :scr="getImg(index)" alt='game'> 
        <h2> {{games[index]['title']}}</h2> 
        <h2> {{games[index]['price'] + conc}} </h2>
        <input v-if=(checkAvailable(index)) type='submit' class=' pointer ' name='submit' value='Add to cart' @click='addGame' /> 
        <p v-else> OUT OF STOCK </p>     
    
        </div>

I've tryed to access images with function getImg:

getImg(index){
            return '/static/images/store/'+ this.games[index]['cover_img'];
        },

But they are not showing. How can I fix this?

Slim Mathew · Accepted Answer · 2021-09-28 19:40:08Z

1

Check if you have a since you use vuejs :src. Nice thing to add :add.

answered Sep 28, 2021 at 19:40

Slim Mathew

213 bronze badges

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

1 Comment

Maria Hussey Over a year ago

did you ment div id ="app"? and :alt?

Shamsail · Accepted Answer · 2021-06-03 16:15:24Z

0

change scr to src in <img> tag

answered Jun 3, 2021 at 16:15

Shamsail

6529 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make dynamic images appear in vue with vuejs?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related