htmlcssdjangodjango-bootstrap3

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


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.


Solution

  • 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.