I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate.
When providing the path, I aim to retrieve the image associated with the sub-club name by dynamically selecting it from the folder. For example, Art.jpg. Your assistance would be greatly appreciated.
<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>