0

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>
7
  • Remove the quotes around 'subclub.subclubName' in the :src attribute, ie :src="'@/assets/sub-clubs-images/' + subclub.subclubName + '.jpg'" Commented Apr 22, 2021 at 3:21
  • I ran it like this <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. Commented Apr 22, 2021 at 3:38
  • That warning is probably related to your checkbox with v-model="subclubName". You don't have any data properties with that name Commented Apr 22, 2021 at 3:42
  • @Phil Does it cause a problem with the image upload? How should I fix this? Commented Apr 22, 2021 at 3:46
  • What "image upload"? I have no idea what you mean Commented Apr 22, 2021 at 3:55

2 Answers 2

1

Just using "@/assets/" wont work to get root (src) directory url. Wrap the string with require() and remove quotations from subclub.subclubName variable Like

<img class="image" :src="require('@/assets/sub-clubs-images/' + subclub.subclubName + '.jpg')" width="75">
                

Also you can use ES6 template literals to concatenate strings with variables as below

<img class="image" :src="require(`@/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">
Sign up to request clarification or add additional context in comments.

Comments

0

you must use require. like this:

<img class="image" :src="require('@/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg')" width="75">

1 Comment

The image name variable shouldn't wrap within quotations This should be 'subclub.subclubName' => subclub.subclubName

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.