Я работаю над проектом 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>
Из документов веб-пакета:
Аргументы, передаваемые для
require.context
должны быть литералами!
Так что я думаю, что в вашем случае парсинг require.context
не удался.
Попробуйте передать литерал вместо переменной imageDir
mounted() {
this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},
Это необходимо, потому что webpack не может разрешить значение переменной времени выполнения во время связывания.
import
а неrequire
?import
иrequire
импорт файла как модуля, если вы хотите импортировать изображения, вы можете сделать это только с указанным загрузчиком веб-пакета, и нет никакой разницы междуimport
иrequire
для веб-пакета. Но в примере с вопросом мы не можем использоватьimport
потому что нам нужно использовать помощник webpackrequire.context
для двойной загрузки всех изображений во время связывания.