Почему один из моих компонентов не работает в моем приложении django-react?

Я новичок в react и для моего проекта мне нужна карусель, для которой я использовал пакет react-multi-carousel. После этого я подключил мое приложение react к моему приложению django с помощью npm run build и теперь проблема в том, что этот компонент (названный slider.js) не работает нормально он просто отображает кнопки, но не изображения и даже стили его я но он работает просто отлично в react не нашел решения в моих поисках

возникает дерево каталогов проекта

и вот вид того, как выглядит мой компонент

и django static в settings.py:

STATIC_URL = '/assets/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [os.path.join(BASE_DIR, '../frontend/build/assets')]

и в fronted/build/index.html:

<!doctype html>
<html lang="en">
    <head>
        {% load static %}
        <meta charset="utf-8"/>
        <link  href="favicon.ico"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="description" content="Web site created using create-react-app"/>
        <link  href="./logo192.png"/>
        <link  href="./manifest.json"/>
        
   
        <link type="text/css" href="{%static 'styles.css' %}" rel="stylesheet" >
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" >
    <title>React App</title><script defer="defer" src="{% static 'js/main.891355db.js'%}">

        </script>
        <link href="{% static 'css/main.450b181d.css'%}" >
    </head>
    <body style="padding:0;margin:0">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root">

        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    </body>
    </html>
Вернуться на верх