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?

Answer 1

change scr to src in <img> tag