Hallo,
Wenn Content Localization mit Discourse AI-Übersetzungen und Cloudflare R2 als S3-kompatiblem Speicher verwendet wird, speichert der übersetzte Beitragsinhalt die rohe R2-Bucket-Endpunkt-URL anstelle der konfigurierten s3_cdn_url (benutzerdefinierte Domain). Für alle Benutzer, die Übersetzungen anzeigen, werden Bilder nicht korrekt dargestellt.
Umgebung
- Discourse: neueste Version
- Cloudflare R2 über S3-kompatiblen Speicher konfiguriert
s3_cdn_url:https://files.mydomain.coms3_use_cdn_url_for_all_uploads: aktiviert- Content Localization + Discourse AI-Übersetzung: aktiviert
Schritte zur Reproduktion
- Konfigurieren Sie Cloudflare R2 mit einer benutzerdefinierten Domain (
s3_cdn_url) - Aktivieren Sie Content Localization und KI-Übersetzung
- Erstellen Sie einen Beitrag mit einem Bild
- Warten Sie, bis die KI-Übersetzung die lokalisierte Version erstellt hat
- Wechseln Sie die Sprache – die Bilder in der übersetzten Version sind kaputt
Beobachtetes Verhalten
Der übersetzte Inhalt enthält URLs wie:
//files.myendpoint.r2.cloudflarestorage.com/original/1X/ anstelle von https://files.mydomain.com/original/1X/
Zusammenhängender Bug: Chat thumbnails bypass s3_cdn_url & use raw S3 bucket URLs
Ein temporärer Fix besteht darin, ein Remapping durchzuführen oder dieses Theme Component zu verwenden:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("1.8.0", (api) => {
const badDomain = "files.myendpoint.r2.cloudflarestorage.com";
const goodDomain = "files.mydomain.com";
function fixImages() {
document.querySelectorAll(`img[src*="${badDomain}"]`).forEach(img => {
img.src = img.src.replace(badDomain, goodDomain);
});
document.querySelectorAll(`img[data-src*="${badDomain}"]`).forEach(img => {
img.dataset.src = img.dataset.src.replace(badDomain, goodDomain);
});
document.querySelectorAll(`img[data-large-src*="${badDomain}"]`).forEach(img => {
img.dataset.largeSrc = img.dataset.largeSrc.replace(badDomain, goodDomain);
});
}
api.decorateCooked(() => fixImages(), { id: "fix-r2-translated-images" });
api.onPageChange(() => fixImages());
});
