CODEWITHSUNDEEP
vue.jsvuejs2
timmyLtus
timmyLtus

Reputation: 274

Vue: Dynamic images within a v-for

I am using a method in a v-for to determine what image to show. I am getting an empty source when I go to inspect the element though. Is this not a valid way to handle image rendering?

<div v-for="unit in units">
   <img :src="getImageUnit(unit)/>
</div>


methods: {
     getImageUnit(unitType) {
         if (unitType == "single") {
             return '/images/single.png';
         } else {
             return '/images/double.png';
         }
     }
}

Upvotes: 0

Views: 60

Answers (1)

Phil
Phil

Reputation: 164733

As always, using methods to render parts of your template is highly inefficient

You should be using a computed property for this instead.

Assuming your image files are all in the public folder, try this

computed: {
  unitsWithImages: ({ units }) => units.map(unit => ({
    unit,
    image: `${process.env.BASE_URL}images/${unit === "single" ? "single" : "double"}.png`
  }))
}

<div v-for="unit in unitsWithImages">
  <p>{{ unit.unit }}</p>
  <img :src="unit.image" />
</div>

Upvotes: 2

Related Questions