Static file collections - Logo navbar does not show up - django

Question

I am trying to have an image (logo) on the navbar.
My project is called "mysite-project" (where manage-pyis), it contains the app "mysite".
In order to upload my static file I did the following:
1) mysite-project/mysite/settings.py
I added:
STATIC_ROOT = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '/static/')
]
2) Created folders static and added my logo.png in:
mysite-project/static/mysite-project/logo.png
3) mysite-project/templates/base.html
{% load staticfiles %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}">
<img src="{% static 'mysite/logo.png' %}" height=30 width=30 class="d-inline-block alighn-top" />
Code of Conduct
</a>
</nav>
4) In mysite-project/mysite/urls.py
from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import TemplateView
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', TemplateView.as_view(template_name='home.html'), name='home'),
path('admin/', admin.site.urls),
path('users/', include('users.urls')),
path('users/', include('django.contrib.auth.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
HOWEVER the image does not show up. I think I have some issues in the settings.py for the folders but I cannot find where

Answer 1

The issue is in your STATICFILES_DIRS setting. If you join a path that has a leading slash then the result will "ignore" any preceding arguments and everything after will be relative to root
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '/static/') # This will result in "/static/"
]
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static') # This will result in "<BASE_DIR>/static/"
]
STATIC_ROOT is the directory that you want to serve files from and the directory that collect_static will populate with all your static files, STATICFILES_DIRS is where Django will collect the files from. STATICFILES_DIRS shouldn't contain STATIC_ROOT. The usual layout for a project is something like this
myproject/ # The root of your repo
myproject/
myapp/
static/ # This is where you put app specific assets
...
static/ # This is where you put your generic static assets. Add this to STATICFILES_DIRS
...
static/ # This is STATIC_ROOT and where your files are served from after being collected
The default value for STATICFILES_FINDERS will look in STATICFILES_DIRS and every apps static directory. If you are using git, you should add the static folder at the root of your repo to .gitignore