مشكلة عرض عنوان URL لصورة Cloudflare R2: شرح مفصل وإصلاح

ساهم خلل
8

تمكّنت من إصلاح هذه المشكلة باستخدام مكون سمة محدّث مشابه لما ورد أعلاه.

يجب أن يبدو المبدئ (initializer) كالتالي:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {

  // ⚠️ تأكد من أن هذه النطاقات هي نطاقاتك الدقيقة!
  // راجع مسارات الصور المصغرة للمشاركات وصور الدردشة وقارن بينها!

  const badDomain = "yoursite-uploads.xxx.r2.cloudflarestorage.com";
  const goodDomain = "uploads.yoursite.com";

  function fixImage(img) {
    if (img.src && img.src.includes(badDomain)) {
      img.src = img.src.replace(badDomain, goodDomain);
    }
    if (img.dataset?.src && img.dataset.src.includes(badDomain)) {
      img.dataset.src = img.dataset.src.replace(badDomain, goodDomain);
    }
  }

  // 1. إصلاح الصور المعروضة في المشاركات القياسية/HTML بأمان
  api.decorateCooked($elem => {
    const container = $elem[0];
    if (!container) return;
    
    container.querySelectorAll(`img[src*="${badDomain}"]`).forEach(fixImage);
  }, { id: 'fix-r2-chat-bug' });

  // 2. مراقب عالي الأداء حصريًا لعناصر الدردشة المحقونة ديناميكيًا
  const observer = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      
      // إذا تم حقن رسالة أو عنصر دردشة جديد في DOM
      if (mutation.type === 'childList') {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === 1) { // ELEMENT_NODE
            if (node.tagName === 'IMG') fixImage(node);
            
            // ابحث فقط داخل العقدة الجديدة، وليس في المستند بأكمله
            node.querySelectorAll(`img[src*="${badDomain}"]`).forEach(fixImage);
          }
        }
      } 
      // إذا تغيرت قيمة سمة src لصورة موجودة (التحميل الكسول)
      else if (mutation.type === 'attributes') {
        if (mutation.target.tagName === 'IMG') {
          fixImage(mutation.target);
        }
      }
    }
  });

  // ابدأ المراقب فورًا
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['src', 'data-src']
  });
});
إعجاب واحد (1)