Получение абсолютного пути к изображению ckeditor + django + react

Django

В этой теме есть 2 вопроса, но оба из них (этот Абсолютные пути к изображениям, загружаемым django-ckeditor) не обновляются. Например, в Django 4.X url был удален. Несмотря на это, я пробовал эти решения, но ни одно мне не помогло

Я также пытался использовать:

CKEDITOR_MEDIA_PREFIX в моем settings.py

Но и это не сработало. Это мой settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Это мой urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/news/', include('news.urls')),
    re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += [
        re_path(r'^media/(?P<path>.*)$', serve, {
            'document_root': settings.MEDIA_ROOT
        }),
]

Вот мой вопрос, как я могу настроить мое приложение Django-rest-framework таким образом, чтобы я получал абсолютный путь при рендеринге html на моем next.js сайте?

Вот что я получаю сейчас:

<img alt=\"\" src=\"/media/uploads/2022/01/19/video.svg\"/>

Вот что я хотел бы получить:

<img alt=\"\" src=\"http://website.com/media/uploads/2022/01/19/video.svg\"

React
. Есть ли способ добиться этого из фронтенда? Например, обновление src

всех img'ов.

Если вам нужно быстрое решение (я уверен, что это не "правильный" способ сделать это), вот мой подход:

Поскольку мне нужно обновить img.src только в одном JavaScript файле, я сделал это с помощью хука, чтобы получить все изображения, отфильтровать только те, которые хранятся на сервере, и обновить их src.

 useEffect(()=>{
        
        //! Don´t forget to update this
        const imgDomain = 'https://...'; 

        const imgStore = document.querySelectorAll("img[src]");
        Object.keys(imgStore).map((x)=>{

            if(imgStore[x].src.includes('uploads')){
                const originalURL = imgStore[x].src;
               var mediaPos =  originalURL.indexOf('/media/');
               var URLlength = originalURL.length;
               var slicedSRC = originalURL.slice (mediaPos, URLlength);
               var newSRC = imgDomain+slicedSRC;
               imgStore[x].src = newSRC;

            }
        })
        
    }, []);
Вернуться на верх