获取图像ckeditor + django + react上的绝对路径答案

【问题标题】：Obtain absolute path on image ckeditor + django + react获取图像ckeditor + django + react上的绝对路径
【发布时间】：2022-01-19 16:24:00
【问题描述】：

Django

关于这个主题有 2 个问题，但它们（这是一个Absolute paths on images uploaded by 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 应用程序，以便在我的 next.js 网站上呈现 html 时获得绝对路径？

这是我现在得到的：

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

这是我想要的：

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

反应
有没有办法从前端实现这些？比如更新所有img的src

【问题讨论】：

标签： reactjs django ckeditor

【解决方案1】：

如果您需要快速解决方案（我很确定这不是“正确”的做法），这是我的方法：

由于我只需要更新一个 JavaScript 文件中的 img.src，因此我使用挂钩来获取所有图像，仅过滤存储在服务器中的图像并更新它们的 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;

            }
        })
        
    }, []);

【讨论】：