CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
ChumiestBucket
ChumiestBucket

Reputation: 1063

v-img only appears in v-for loop when used with regular img HTML tag

I have a super weird problem here, I want to use a for-loop (using v-for) for images inside /static.

Strangely, using v-img only works if it's used in conjunction with img. I'd like to strictly use v-img for easy formatting and continuance.

Here is my code(s) and a screenshot for each example:

Just using v-img

<div v-for="(image, index) in images" :key="index">
 <v-img :src="image.src"></v-img>
</div>

Nothing is displayed. enter image description here

Just using img

<div v-for="(image, index) in images" :key="index">
  <img class="image" :src="image.src" :alt="image.alt">
</div>

Images are displayed with standard img properties. enter image description here

Using both v-img and img

<div v-for="(image, index) in images" :key="index">
  <v-img :src="image.src"></v-img>
  <img class="image" :src="image.src" :alt="image.alt">
</div>

Images are displayed from both v-img and img. enter image description here

Upvotes: 1

Views: 1058

Answers (2)

walshaw
walshaw

Reputation: 43

I have given an example on codepen

https://codepen.io/anon/pen/zVmMYK

<v-img v-for="image in images" :src="image.src"  aspect-ratio="2"/>

this works for me

Upvotes: 1

SimoMatavulj
SimoMatavulj

Reputation: 584

You can try this <v-img :src="require('image.src')"></v-img> I hope it helps.

Upvotes: 0

Related Questions