I came up with a method to instruct Vue to search in a file and assign images to the corresponding number of cards. So far, it's working perfectly.
However, I'm curious if there is a more efficient way to achieve this. The current drawback is that you have to rename your images sequentially (e.g., 1.png, 2.png, 3.png, etc.), which is not ideal for SEO purposes. It can also be frustrating if you need to add or remove images.
While this issue isn't a deal-breaker, I would prefer not to compromise my SEO ranking potential.
Below is the code snippet:
<v-container fluid>
<v-row>
<v-col
v-for="n in 38"
:key="n"
class="d-flex child-flex"
cols="4"
>
<v-lazy
:options="{
threshold: 0.5,
}"
transition="fade-transition"
>
<v-card elevation="8" shaped draggable="false" class="d-flex">
<v-img
:src="require('@/assets/skillsLogo/' + n + '.png')"
:lazy-src="require('@/assets/skillsLogo/' + n + '.png')"
class="grey lighten-4"
aspect-ratio="3"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-lazy>
</v-col>
</v-row>
</v-container>
Thank you for any suggestions.