How to bind an image inside v-for in Vue.js?

Question

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>

Remove the quotes around `'subclub.subclubName'` in the `:src` attribute, ie `:src="'@/assets/sub-clubs-images/' + subclub.subclubName + '.jpg'"` — Phil, Apr 22 '21 at 03:21
I ran it like this ` ` 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._ — ND., Apr 22 '21 at 03:38
That warning is probably related to your checkbox with `v-model="subclubName"`. You don't have any data properties with that name — Phil, Apr 22 '21 at 03:42
@Phil Does it cause a problem with the image upload? How should I fix this? — ND., Apr 22 '21 at 03:46
@Phil The image I have given path is not visible on the page. — ND., Apr 22 '21 at 03:58
Have you looked at this one? https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working — AT82, Apr 22 '21 at 06:08

score 1 · Accepted Answer · answered Apr 22 '21 at 07:10

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">

AhmadKZX · Answer 2 · 2021-04-22T07:15:12.147

0

you must use require. like this:

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

edited Apr 22 '21 at 07:15

answered Apr 22 '21 at 06:57

AhmadKZX

293
1
11

The image name variable shouldn't wrap within quotations This should be 'subclub.subclubName' => subclub.subclubName – Gayan Sandamal Apr 22 '21 at 07:13

How to bind an image inside v-for in Vue.js?

2 Answers2