الصور لا تظهر في react

قم بطباعة post.image وتفقد هل مسار الصورة صحيح؟

أيضًا جرب التالي:

      <img src="https://placehold.co/600x400" />

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

بتاريخ 40 دقائق مضت قال Mustafa Suleiman:

قم بطباعة post.image وتفقد هل مسار الصورة صحيح؟

أيضًا جرب التالي:

      <img src="https://placehold.co/600x400" />

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

بقول لي 

 Cannot read properties of undefined (reading 'image')

فكيف اصل الى الصورة؟

ولماذا الوسم اللذي وضعته انا لا يعمل ؟

وهل هنالك المشكلة في وضعي لمسار الصورة في الباك اند؟

gallery.rar

يبدو انه توجد بعض الالتباس بين المسميات وال port الذي تعمل به 
فانت مخزن في قاعده البيانات الصوره ب port 1469 ويبدو انك تعمل ع port 5173 فلهذا السبب لا يجد هذه الصوره لاختلاف ال port 
ويبدو انك مخزن في قاعده البيانات الصوره في فولدر images يجب ان تتأكد من الاسم لانك تحاول انا تجلب الصوره  

بتاريخ 1 ساعة قال احمد قايد:

عن طريق جلبها من مجلد موجود في مسار الملف 

وتنادي عليها من فولدر اسمه image 
وللتأكد من مسار الصوره يمكنك نقل مسار الصوره كاملا ووضعه في new tab واذا ظهرت الصوره اذا ف المسار  صحيح واذا لم تظهر يجب ان ترجع وتفحص الملفات 

بتاريخ 19 دقائق مضت قال Khaled Osama3:

يبدو انه توجد بعض الالتباس بين المسميات وال port الذي تعمل به 
فانت مخزن في قاعده البيانات الصوره ب port 1469 ويبدو انك تعمل ع port 5173 فلهذا السبب لا يجد هذه الصوره لاختلاف ال port 
ويبدو انك مخزن في قاعده البيانات الصوره في فولدر images يجب ان تتأكد من الاسم لانك تحاول انا تجلب الصوره  

وتنادي عليها من فولدر اسمه image 
وللتأكد من مسار الصوره يمكنك نقل مسار الصوره كاملا ووضعه في new tab واذا ظهرت الصوره اذا ف المسار  صحيح واذا لم تظهر يجب ان ترجع وتفحص الملفات 

استاذ خالد 

كل الفروقات اللتي ذكرتها تكمن في الفرق ما بين الباك اند والفررنت اند 

ومن المفترض اني اطلب الصوره من السيرفر اي انه من المفروض ان يشتغل السيرفر على بورت 1469

الفولدر images موجود في السيرفر ،اما image فهو الاسم الصوره اللذي عرفته في موديل البوست 

كما أنني عندما اقوم بطباعه 

consol.log(post.image)

اي الصوره أو النص الموجود داخل موديول post يظهر لي 

Cannot read properties of undefined

بتاريخ 52 دقائق مضت قال احمد قايد:

بقول لي 

 Cannot read properties of undefined (reading 'image')

 

فكيف اصل الى الصورة؟

ولماذا الوسم اللذي وضعته انا لا يعمل ؟

وهل هنالك المشكلة في وضعي لمسار الصورة في الباك اند؟

أنت تستخدم vite لذا عليك استيراد مسار الصورة كالتالي:

import testImage from '../../image/IMG_20220103_173254.jpg';

ثم استخدامها كالتالي:

          <img src={testImage} />

حيث يتم عمل hash لمسار الصورة في الإخراج، لكن إذا أردت استخدام مسار ثابت أي كالتالي:

          <img src='/../../image/IMG_20220103_173254.jpg' />

فعليك نقل مجلد الصور إلى مجلد public حيث يتم البحث عن الوسائط بالمسارات الثابتة هناك ولكن ضع علامة / في بداية المسار للإشارة لمجلد الجذر root أي مجلد المشروع الرئيسي.

وبخصوص Cannot read properties of undefined قم بطباعة كائن post وتفقد ما اسم الخاصية للصورة.

بتاريخ 20 دقائق مضت قال Mustafa Suleiman:

أنت تستخدم vite لذا عليك استيراد مسار الصورة كالتالي:

import testImage from '../../image/IMG_20220103_173254.jpg';

ثم استخدامها كالتالي:

          <img src={testImage} />

حيث يتم عمل hash لمسار الصورة في الإخراج، لكن إذا أردت استخدام مسار ثابت أي كالتالي:

          <img src='/../../image/IMG_20220103_173254.jpg' />

فعليك نقل مجلد الصور إلى مجلد public حيث يتم البحث عن الوسائط بالمسارات الثابتة هناك ولكن ضع علامة / في بداية المسار للإشارة لمجلد الجذر root أي مجلد المشروع الرئيسي.

وبخصوص Cannot read properties of undefined قم بطباعة كائن post وتفقد ما اسم الخاصية للصورة.

يقول ان post  غير موجود 

اذا كات post غير موجود فكيف طبع المصفوفات كما هو موجود في السيرفر

كما انه يقوم بطبع كل من post.title و post.description بلا مشاكل فمن اين ياتي بهم ولا يطبع post نفسها

انا اسف جدا استاذي ولكن الموضوع لا يدخل عقلي بتاتا ولم افهم اين المشكلة

ا

عتذر استاذي كنت اطبعه بشكل خاطئ

الان المشكلة في رفع الصورة نفسها اذا ومن ثم جلبها