How to add custom image as Logo with Bootstrap class navbar-brand in Django?

Question

Many thanks for your support.I am a newbee to Django and Bootstrap.

When I downloaded a bootstrap template it came with a logo.png.If I point to this image with below code all works

<a href="#" class="navbar-brand">
    <!-- Logo Image -->
    <img src="{% static '/img/logo.png' %}" width="100" alt="" class="d-inline-block align-middle mr-2">
    <!-- Logo Text -->
    <span class="text-uppercase font-weight-bold">Brand Name</span>
</a>

However if I place a custom image(test.png) within the same folder? of logo.png and point to that.The site does not show the logo.

1. I tried resizing test.png to same as logo.png
2. I tried using other images on my system
3. Only the default logo and images that comes with templates works.

What am i missing please? Please help me.

Answer 1

If you are using a production server then:

You need to use python manage.py collectstatic to get your new image into the directory where your static files are being served. That directory you specify in the STATIC_ROOT setting in your project's settings.py .

After executing collectstatic you should be able to spin up the server and the image in your link should be test.png .

This is all Django, and nothing to do with Bootstrap.

Edit: As dirkgroten points out several ways of dealing with static files are explained here . Note the difference between the development server and a production server.