Динамически получать пути к изображениям в папке с Nuxt - PullRequest
Новая
       28

Динамически получать пути к изображениям в папке с Nuxt

0 голосов
/ 01 января 2019

enter image description here

Я использую nuxt с vuetify.У меня есть работающий компонент карусели. Я хочу создать список файлов .png в статической папке.После Динамический импорт изображений из каталога с помощью веб-пакета и После https://webpack.js.org/guides/dependency-management/#context-module-api мой компонент выглядит следующим образом: 

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


<script>

  var cache = {};
  function importAll(r) {
    r.keys().forEach(key => cache[key] = r(key));
  }
  var getImagePaths = importAll(require.context('../static/', false, /\.png$/));
  // At build-time cache will be populated with all required modules. 
  export default {
    data: function() {
      return {
        items: getImagePaths
      };
    }
  };
  //     export default {
  //       data() {
  //         return {
  //           items: [{
  //               src: "/52lv.PNG"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
  //             }
  //           ]
  //         };
  //       }
  //     };
  //
</script>

Я хочу выполнить поиск в статической папке и найти пути кизображения, поместите их в массив и экспортируйте их в шаблон HTML.

Я обнаружил, что если я отредактирую массив элементов скрипта, чтобы он выглядел следующим образом, он будет работать:

items: [{src: '/52iv.png'}, {src: '/91Iv.png '}, ....

Как настроить код для получения нужного результата?

РЕДАКТИРОВАТЬ:

Я посмотрел на предлагаемое решение, но после вербального копирования я получил следующую ошибку:

enter image description here

1 Ответ

0 голосов
/ 10 января 2019

Похоже, что работает: 

<template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


<script>
  var cache = {};
  const images = require.context('../static/', false, /\.png$/);
  var imagesArray = Array.from(images.keys());
  var constructed = [];
  function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
      constructed.push({
        'src': fileName.substr(1)
      })
    });
    return constructed;
  }
  var res = constructItems(imagesArray, constructed);
  console.log(res);
  export default {
    data: function() {
      return {
        items: res
      };
    }
  };

...