اذهب إلى المحتوى
  • 0

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

Ahmed Zehry

السؤال

لدي ملف في تطبيق node يحتوي على جميع  الصور ، كيف اقوم بعرض جيمع الصور  الموجودة داخل الملف او القيام بعملية fetch لها واجعل المستخدم بختار صورة منها ؟
مثال :
https://api.wesamelnagah.com/images/offercard.jpg 
في هذا الرابط تعرض صورة معينه  انا اريد فتح المجلد images  وعرض جميع الصور الموجودة بداخله عند الدخول الى هذا الرابط https://api.wesamelnagah.com/images

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك استخدام 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/اسم_الصورة

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...