Блог

Главная - Вопросы по программированию - Скажите Vue, чтобы он просматривал все изображения в папке, не меняя имен изображений

Скажите Vue, чтобы он просматривал все изображения в папке, не меняя имен изображений

#javascript #vue.js #vuetify.js

#javascript #vue.js #vuetify.js

Вопрос:

Я придумал способ сказать Vue, чтобы он просматривал файл и назначал изображения соответствующему количеству карточек. Все работает нормально.

Но мне было интересно, есть ли лучший способ сделать это. Причина, по которой я спрашиваю, заключается в том, что в настоящее время вам нужно переименовывать свои изображения в числовом порядке (например, 1.png, 2.png, 3.png и т. Д.), И, как вы знаете, для SEO очень плохо неправильно называть ваши файлы изображений, и это немного раздражает, если выхотите добавить больше изображений или удалить какие-либо

Это не полный разрыв сделки, но мне бы хотелось, чтобы я не терял свои возможности ранжирования в SEO.

Вот код

 <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>

Заранее спасибо

Комментарии:

1. Вы можете использовать require.context('@/assets/skillsLogo', false, /.png$/) для получения объекта со всеми файлами в данной папке — тогда вы можете перечислить его.

2. Спасибо @IVOGELOV за быстрый ответ. Если я использую это, это выдает ошибку в консоли. Invalid prop: type check failed for prop "src". Expected String, Object, got Function

3. require.context() не является прямой заменой require() — вы должны создать вычисляемое свойство в своем компоненте и вызвать его внутри, затем подготовить массив и вернуть его в качестве результата для вычисляемого свойства. Затем используйте это вычисляемое свойство в качестве источника в v-for

4. @IVOGELOV Спасибо, чувак, теперь я понимаю. спасибо за отличную помощь

Ответ №1:

images.js 

 const context = require.context("@/assets/skillsLogo/", false, /.png$/);
const images = context.keys().map(context);

export default images;

Документы

Компонент:

 <script>
import images from "./images.js";

export default {
  data() {
    return {
      images: images,
    };
  },
};
</script>

Выполните итерацию по images массиву в вашем шаблоне…