Как мне сопоставить() все изображения в папке? | React.js и Vite
Мне нужно сопоставить все изображения в папке в общедоступном каталоге, и я следил за этим сообщением, чтобы попытаться это сделать, но получаю эту ошибку.
Uncaught (in promise) ReferenceError: require is not defined at GalleryPage.jsx:8:16
Вот мой код
const images = require.context("/_fairImages", true);
const imageList = images.keys().map((image) => images(image));
function GalleryPage() {
return (
<div className = "galleryPage_v2">
<div className = "galleryWrapper">
{imageList.map((image, index) => (
<img src = {image.default} alt = "" className = "galleryImg" />
))}
</div>
</div>
);
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
require.context должен интерпретироваться вашим сборщиком, а не средой выполнения.
Используете ли вы веб-пакет для объединения кода перед его запуском в браузере?
https://webpack.js.org/guides/dependent-management/#requirecontext
Ой, ок, я не знала этого про require.context. Нет, я не использую вебпак, на самом деле я использую Vite
Поскольку вы используете Vite, вы можете попробовать import.meta.glob он похож на Webpack require.context
// Dynamically import all images in the _fairImages folder
const images = import.meta.glob('/public/_fairImages/*.{png,jpg,jpeg,svg}', { eager: true });
function GalleryPage() {
const imageList = Object.values(images).map((image, index) => (
<img key = {index} src = {image.default} alt = {`Image ${index + 1}`} className = "galleryImg" />
));
return (
<div className = "galleryPage_v2">
<div className = "galleryWrapper">
{imageList}
</div>
</div>
);
}
Да, это сработало, большое спасибо!!
Ну, однажды, когда мне нужно было сделать что-то подобное, я использовал следующий подход:
Я создал массив имен изображений из папки, в которой они находились.
Вот как вы можете это сделать:
const importAll = (r) => {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
};
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/))
Вот что я делаю:
- require.context предоставляет все пути к файлам, соответствующие предоставленному шаблону (регулярному выражению)
- false в функции importAll указывает, что погода включает подкаталоги или нет
- Regex для проверки файлов с расширениями изображений
Теперь, когда у меня есть имена изображений, я могу просто перебирать:
<div className = "image-gallery">
{Object.keys(images).map((imageName, index) => (
<img key = {index} src = {images[imageName]} alt = {imageName} />
))}
</div>
Поскольку я использую Vite, я не могу использовать require.context, но я рад, что вы объяснили, что делают false и /\.(png|jpe?g|svg)$/, я этого не знал. Так что спасибо вам большое
Вы не можете просмотреть содержимое каталога изнутри браузера.