I have a peculiar issue at hand - I am trying to utilize a for-loop (via v-for
) specifically for images within the /static
directory.
Oddly enough, it seems that using v-img
only functions properly when paired with img
. My preference is to solely rely on v-img
for seamless styling and consistency.
Below are my code snippets and corresponding screenshots for each scenario:
Exclusively utilizing v-img
<div v-for="(image, index) in images" :key="index">
<v-img :src="image.src"></v-img>
</div>
No content is being displayed. https://i.sstatic.net/9CZIq.png
Solely utilizing img
<div v-for="(image, index) in images" :key="index">
<img class="image" :src="image.src" :alt="image.alt">
</div>
Images are rendered with standard img
attributes.
https://i.sstatic.net/ospmj.png
Combining 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>
Both v-img
and img
components are able to display images together.
https://i.sstatic.net/4UkuM.png