إرسال صورة من مخدم node.js للواجهة الأمامية عن طريق JSON

أرجو إضافة شرح لكيفية تمريرك لمسار الصورة في JSON.. وكمثال بسيط لتمرير اسم الصورة:

{
	"imageUrl": "img.jpg",
	....
}

إن كنت تستخدم مخدم express:

يمكن تخديم الملفات الساكنة مثل الصور وتحديد مجلد لها، مثلا ضع الصور العامة في المسار:

public/images

ثم:

تنصيب الحزمة
npm install express
تشغيل المخدم
node server.js

***********************************

// تضمين الوحدة
const express = require('express');
  
// إنشاء المخدم
const app = express();
  
// تحديد المنفذ
const PORT = 3000;                  
  
// تخديم الملفات الساكنة
// تحديد مجلد تخديم الصور
app.use(express.static('public'));  
app.use('/images', express.static('images')); 
  
// ربط المخدم مع المنفذ
app.listen(PORT, () => {
  console.log(`Running server on PORT ${PORT}...`);
})

في المثال الأول، أصبح طلب روابط الصور مباشر وعام أي متاح للجميع. مثلاً طلب صورة بالشكل:

http://localhost:3000/images/hsoub.png

سيتم عرضها مباشرة.

لجعل المخدم يعيد صورة عند طلب مسار معين، كمثال:

var filepath = '~/path/to/image.png'

app.get('/path/image', function (req, res) {
    res.sendFile(filepath);
})

إن كان رابط الصورة تريده بشكل كامل، عليك كتابة البروتوكول و الدومين وكامل المسار .. ثم طلبه من الواجهات الأمامية.

ﻻ يمكنك إرسال الصورة في ملف جيسون حيث أن ملفات json يمكن أن تحتوي فقط على ملفات نصية (text) , ولكن يوجد حل بديل وهو أن تقوم بتشفير الصورة عبر base64 encoding وهو تشفير يقوم بتحويل الملفات الثنائية إلى حروف وأرقام ASCII 

تنفيذ الشفرة عبر node js

const Base64 = Buffer.from(file).toString('base64');

نقوم بعد ذلك بتضمين ذلك النص في الرد الjson الذي نرسله إلى المُستحدم

إستﻻم الصورة عبر الfront end 

من ناحية المُستخدم نقوم بوضع تشفير الbase64 الخاص بالصورة ولكن يسبقه 

data:image/png;base64,

مثال على إستﻻم الصور عبر react 

<img src={`data:image/png;base64,${this.state.image}`}/>

اذا كان رابط المخزن للصورة هو لصورة موضوعة في server خارجي مثلا 

www.example.com/dsqddqsd.png

فيمكنك فقط ارسال الرابط مع معلومات ال json

لكن اظن أن الحالة التي تتكلم عنها انت هي انك تقوم بتخزيت الصور في server الخاص بك وتخزن رابط الوصول الى تلك الصور في قاعدة البيانات ولكن حتى في هذه الحالة يمكنك القيام بشئ مشابه بحيث لو أرفقت هذا السطر في express 

app.use(express.static('public'))

ستتمكن من قراءة الملفات الثابتة داخل مجلد public يعني لو كان لديك مجلد التخزين image داخل public ستكون الروابط المخزنة في قاعدة البيانات على هذا الشكل مثلا

/images/pic.jpg

وللوصول الى الصور ببساطة ستسخدم رابط ال server الخاص بك

http://localhost:5000/images/pic.jpg

مما يعني انك تستطيع ارسال الرابط مع json ثم استدعاء الصورة من frontend

http://localhost:5000/images/pic.jpg