استكشاف الأخطاء وإصلاحها·7 min read·

لماذا لا تظهر صوري؟

ضبط CORS في حاوية R2، تأخر نشر ذاكرة CDN، حماية الروابط المباشرة، ومشاكل نوع MIME — دليل تشخيصي شامل للصور المعطوبة في VeloCMS.

الصور المعطوبة تُزعج القراء وتُحرج الكتّاب. البشرى الجيدة أن أعطال الصور في VeloCMS تعود دائماً تقريباً إلى أحد أربعة أسباب جذرية، ولكل منها حل واضح. لنستعرضها بالترتيب وفق احتمالية الحدوث.

ابدأ بفحص وحدة تحكم المتصفح

افتح الصفحة التي تحتوي الصورة المعطوبة، انقر بزر الماوس الأيمن ← Inspect، وانتقل إلى علامة تبويب Console. أعطال الصور تُنتج عادةً أحد ثلاثة أنواع من الأخطاء: خطأ 403 Forbidden (مشكلة في الصلاحيات أو حماية الروابط)، خطأ CORS (ترويسات cross-origin مفقودة في حاوية R2)، أو net::ERR_FAILED (مشكلة في DNS أو الشبكة). الخطأ المحدد يُحدد القسم التالي الذي يجب الانتقال إليه.

ضبط CORS في حاوية R2

حاويات Cloudflare R2 لا تُفعّل CORS افتراضياً. إذا أنشأتَ حاويتك الخاصة على R2 (وضع الاستضافة الذاتية)، تحتاج إلى إضافة قاعدة CORS تسمح بطلبات GET من نطاق مدونتك. بدون ذلك، يمنع المتصفح تحميل الصور عندما تُقدَّم الصفحة من أصل مختلف عن الحاوية.

[{"AllowedOrigins":["https://yourdomain.com","https://yourblog.velocms.org"],"AllowedMethods":["GET","HEAD"],"AllowedHeaders":["*"],"ExposeHeaders":["ETag"],"MaxAgeSeconds":86400}]

طبّق ذلك عبر لوحة تحكم Cloudflare R2: انتقل إلى R2 ← حاويتك ← Settings ← CORS Policy ← Edit CORS Policy. الصق JSON أعلاه مع استبدال قيم النطاق بنطاقك الفعلي. احفظ وانتظر 30 ثانية لانتشار السياسة. ثم أعد تحميل الصفحة التي تحتوي الصور المعطوبة قسراً (Ctrl+Shift+R على Windows/Linux، Cmd+Shift+R على Mac).

تأخر نشر ذاكرة CDN

بعد رفع صورة عبر Admin ← Media، تخزّنها VeloCMS في R2 وتُقدّمها عبر شبكة CDN الخاصة بـ Cloudflare. في المرة الأولى التي يحمّل فيها أحد القراء رابط تلك الصورة، تجلبها Cloudflare من R2 وتخزّنها في حافة الشبكة. تكون التحميلات اللاحقة سريعة. لكن إذا رفعتَ صورة ونشرتَ المقالة فوراً، ثمة فترة قصيرة (عادةً 10 إلى 60 ثانية) لم تُخزّن فيها عقدة CDN الأقرب لقارئك الصورة بعد. إذا أفاد قارئ بأن صورة كانت معطوبة لحظة نشر المقالة وهي الآن تعمل، فتأخر النشر هذا هو على الأرجح السبب.

حماية الروابط المباشرة

إذا فعّلتَ حماية الروابط المباشرة (Hotlink Protection) في Cloudflare (لوحة Cloudflare ← Scrape Shield ← Hotlink Protection)، ستحجب Cloudflare طلبات الصور القادمة من مواقع أخرى. قد يُؤثر ذلك على صورك الخاصة أيضاً إذا لم يكن نطاق مدونتك في قائمة الاستثناءات. تحقق من Cloudflare ← Scrape Shield ← Hotlink Protection وأضف نطاق مدونتك (وأي نطاقات معاينة كالنطاق الفرعي .velocms.org) إلى قائمة الاستثناءات.

نوع MIME وأخطاء الرفع

تقبل VeloCMS رفع JPEG وPNG وWebP وGIF وAVIF وSVG. الملفات ذات الامتداد الخاطئ أو الترويسة التالفة قد تبدو مرفوعة بنجاح لكن البيانات الثنائية الفعلية غير صالحة ولا يستطيع المتصفح عرضها. في وحدة تحكم المتصفح، يُظهر ذلك استجابة 200 OK بنوع MIME هو application/octet-stream بدلاً من image/jpeg أو image/webp.

  • انتقل إلى Admin ← Media وابحث عن الصورة المعطوبة.
  • انقر على إدخال الصورة لفتح لوحة التفاصيل.
  • جرّب تنزيل الملف مباشرةً باستخدام الرابط المعروض — إذا كان حجم التنزيل صفر بايت أو تالفاً، فشل الرفع في منتصفه.
  • احذف الإدخال وأعد رفع الملف الأصلي.
  • إذا فشل الملف ذاته مرة أخرى، تحقق من حد حجم نص الطلب في نشرة Railway (الافتراضي 50 ميغابايت — الملفات الخام الكبيرة من كاميرات RAW قد تتجاوز هذا الحد).

الصور المرفوعة عبر السحب والإفلات في المحرر تعمل بطريقة مختلفة عن رفع مكتبة الوسائط. إذا فشل السحب والإفلات لكنّ مكتبة الوسائط تعمل (أو العكس)، أذكر ذلك في طلب الدعم — يُساعد ذلك في تحديد ما إذا كانت المشكلة في معالج ملفات المحرر أم في مسار API.

لا تزال معطوبة بعد كل ما سبق؟

افتح Admin ← Settings ← Logs وابحث عن إدخالات تحتوي «R2» أو «media» في الرسالة قرب وقت الرفع. إذا رأيتَ خطأ «Failed to upload to R2»، فقد يكون CLOUDFLARE_R2_ACCESS_KEY_ID أو CLOUDFLARE_R2_SECRET_ACCESS_KEY أو CLOUDFLARE_R2_BUCKET_NAME خاطئاً. انتقل إلى Railway ← خدمة VeloCMS ← Variables وتحقق مرة أخرى من القيم الثلاثة مقارنةً بـ API token الخاص بـ R2 في لوحة تحكم Cloudflare.