I have tried all the solutions on the internet but have not been able to print the pictures on the screen in any way. Am I making a very simple mistake? File names and folders are correct.
While giving the path, I want to get the picture registered with the name subclubName from the related folder by giving sub-club name from the data. E.g Art.jpg. I would be very happy if you could help.
<template>
    <div>
        <div class="container">
            <a class="logo" href="#">Social Interest e-Club</a>
            <div class="start">Start</div>
            <div class="progress-bar-front bar"></div>
            <div class="progress-bar-back"></div>
            <div class="finish">Finish</div>
        </div>
    <form class="questionnaire-result" action="#">
        <h1 class="h1">Here are your result!</h1>
        <div class="grid-container">
            <h2 class="sub-club"> Sub-Club</h2>
            <h2 class="score"> Score</h2>
            <h2 class="join-que"> Want to Join?</h2>
            <div class="sub-club-section " v-for="(subclub,index) in subclubs" :key="index">
                    <img class="image" :src="'@/assets/sub-clubs-images/'+ 'subclub.subclubName'+'.jpg'" width="75">
                    <h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
                    <h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
                    <div v-if="subclub.score>50">
                        <input class="join-btn option-input checkbox" type="checkbox" v-model="subclubName" :value="index" >
                    </div>
                     
            </div>
        <button @click=" goToHomePage()" class="button "><span> JOIN </span></button>
        </div>
    </form>
    </div>
  
</template>
<script>
export default {
    name:"result",
    data(){
      
        return{
            subclubs:[
                { 
                      id:1,
                      subclubName:"Yoga",
                      score:70,
                
            },
            {  
                      id:3,
                      subclubName:"Novel",
                      score:60,
                   
            },
                {  
                      id:4,
                      subclubName:"Piano",
                      score:45,
           
            },
            
            ]
        }
    },
    methods:{
            goToHomePage(){
                this.$router.push("/");
            }
    }
}
</script>
    
'subclub.subclubName'in the:srcattribute, ie:src="'@/assets/sub-clubs-images/' + subclub.subclubName + '.jpg'"<img class="image" :src="'@/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg'" width="75">But again it didn't work. the console gives a warning like this : [Vue warn]: Property or method "subclubName" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.v-model="subclubName". You don't have any data properties with that name