title: Tell Vue to look at all the pictures in a folder without changing the names of the images
body: <p>I made a way to tell Vue to look in a file and assign images to the corresponding amount of cards. It's working fine.</p>
  <p>But I was wondering if there is a better way to do this. The reason why I am asking is that currently, you need to rename your images in numerical order (Eg. 1.png,2.png,3.png etc) and as you know it's very bad for SEO to not name your Image files properly and its a tad bit annoying if you want to add more images or remove any</p>
  <p>This is not a complete deal breaker but I would like it if I do not lose on my SEO ranking capabilities.</p>
  <p>Here is the code</p>
  <pre><code>&lt;v-container fluid&gt;
              &lt;v-row&gt;
                &lt;v-col
                  v-for=&quot;n in 38&quot;
                  :key=&quot;n&quot;
                  class=&quot;d-flex child-flex&quot;
                  cols=&quot;4&quot;
                &gt;
                  &lt;v-lazy
                    :options=&quot;{
                      threshold: 0.5,
                    }&quot;
                    transition=&quot;fade-transition&quot;
                  &gt;
                    &lt;v-card elevation=&quot;8&quot; shaped draggable=&quot;false&quot; class=&quot;d-flex&quot;&gt;
                      &lt;v-img
                        :src=&quot;require('@/assets/skillsLogo/' + n + '.png')&quot;
                        :lazy-src=&quot;require('@/assets/skillsLogo/' + n + '.png')&quot;
                        class=&quot;grey lighten-4&quot;
                        aspect-ratio=&quot;3&quot;
                      &gt;
                        &lt;template v-slot:placeholder&gt;
                          &lt;v-row
                            class=&quot;fill-height ma-0&quot;
                            align=&quot;center&quot;
                            justify=&quot;center&quot;
                          &gt;
                            &lt;v-progress-circular
                              indeterminate
                              color=&quot;grey lighten-5&quot;
                            &gt;&lt;/v-progress-circular&gt;
                          &lt;/v-row&gt;
                        &lt;/template&gt;
                      &lt;/v-img&gt;
                    &lt;/v-card&gt;
                  &lt;/v-lazy&gt;
                &lt;/v-col&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  </code></pre>
  <p>Thanks in advance</p>