طريقة الوصول الى الصور في تطبيق node.js

يمكنك استخدام Express.js لإنشاء خادم ويب يعرض جميع الصور الموجودة في المجلد، أولا تأكد من أنك قمت تثبيت مكتبة express باستخدام npm:

npm install express

ثم أنشئ ملف server.js في الجذر مشروع وضع فيه هذه الشيفرة:

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000; // يمكنك تغيير هذا المنفذ كما تشاء

// المسار إلى مجلد الصور
const imagesFolder = path.join(__dirname, 'images');

// استخدم ميدلوير `express.static` لجعل مجلد الصور متاحًا للوصول العام
app.use('/images', express.static(imagesFolder));

// قم بإنشاء نقطة نهاية لإرجاع قائمة بجميع الصور في المجلد
app.get('/images-list', (req, res) => {
    fs.readdir(imagesFolder, (err, files) => {
        if (err) {
            return res.status(500).json({ error: 'Failed to read images directory' });
        }

        // قم بتصفية الملفات للحصول على الصور فقط
        const images = files.filter(file => /\.(jpg|jpeg|png|gif)$/i.test(file));

        // أرسل قائمة الصور كاستجابة JSON
        res.json(images);
    });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

لقد قمت بوضع تعليقات في الكود لكي يكون كل شيء واضحا بالنسبة لك.

بعدها قم بإنشاء مجلد يسمى images في جذر المشروع وضع بعض الصور فيه لاختبار التطبيق، ثم شغل السيرفر:

node server.js

وافتح المتصفح وانتقل إلى الرابط التالي للحصول على قائمة بجميع الصور:

http://localhost:3000/images-list

ستظهر قائمة بالصور الموجودة في المجلد images في شكل JSON أين يمكنك استخدامها لعرض الصور في واجهة المستخدم الخاصة بك.

وللوصول إلى صورة معينة بحد ذاتها، يمكنك استخدام الرابط التالي:

http://localhost:3000/images/اسم_الصورة

بهذه الطريقة، يمكن للمستخدمين رؤية جميع الصور المتاحة واختيار الصورة التي يريدونها.