Как получить все файлы изображений в каталоге, используя vue.js / nuxt.js

1

Я работаю над проектом nuxt.js и получаю сообщение об ошибке:

В браузере я вижу эту ошибку:

__webpack_require__(...).context is not a function

И в терминале я получаю эту ошибку:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted 

Вот мой код

<script>
export default {
  name: 'SectionOurClients',
  data() {
    return {
      imageDir: '../assets/images/clients/',
      images: {},
    };
  },

  mounted() {
    this.importAll(require.context(this.imageDir, true, /\.png$/));
  },

  methods: {
    importAll(r) {
      console.log(r)
    },
  },
};
</script>

Я использовал вышеупомянутый скрипт от ЗДЕСЬ.

Пожалуйста, помогите, спасибо.


РЕДАКТИРОВАТЬ: После ответа @MaxSinev, вот как выглядит мой рабочий код:

<template lang="pug">
  .row
    .col(v-for="client in images")
      img(:src="client.pathLong")
</template>

<script>
export default {
  name: 'SectionOurClients',
  data() {
    return {
      images: [],
    };
  },

  mounted() {
    this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
  },

  methods: {
    importAll(r) {
      r.keys().forEach(key => (this.images.push({ pathLong: r(key), pathShort: key })));
    },
  },
};
</script>
  • 0
    почему вы не используете import а не require ?
  • 1
    @Terry Терри, это не совсем правильный ответ. import и require импорт файла как модуля, если вы хотите импортировать изображения, вы можете сделать это только с указанным загрузчиком веб-пакета, и нет никакой разницы между import и require для веб-пакета. Но в примере с вопросом мы не можем использовать import потому что нам нужно использовать помощник webpack require.context для двойной загрузки всех изображений во время связывания.
Показать ещё 1 комментарий
Теги:
vue.js
vuejs2
nuxt.js

1 ответ

2
Лучший ответ

Из документов веб-пакета:

Аргументы, передаваемые для require.context должны быть литералами!

Так что я думаю, что в вашем случае парсинг require.context не удался.

Попробуйте передать литерал вместо переменной imageDir

mounted() {
    this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},

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

  • 0
    спасибо за вашу помощь, я включил рабочий код в свой ответ.
  • 0
    когда я добавляю .pdf его ошибка броска. Есть ли способ получить список всех файлов из папки?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню