Search code examples
htmldjangosvgdjango-templates

Image is not displaying in Django from static

The following is the only code where I mention the image:

Inside the HTML and CSS file:

<button type="submit" class="task-item-button">
<img src="{% static 'x.svg' %}" alt="Close icon">
</button>

.task-item-button {
  position: absolute;
    top: 10px; /* Adjust the top position */
    right: 10px; /* Adjust the right position */
    width: 20px;
    height: 20px;
    color: red;
    padding: 0; 
    border: none; 
    background: none;
    border-radius: 8px;
    cursor: pointer;
    
}
.task-item-button img {
  width: 20px; /* Adjust the width of the image as needed */
  height: 20px; /* Adjust the height of the image as needed */
}

and I do have {% load static %} at the top.

Apart from that I have no other mentions of the images anywhere.

The structure of static looks like:

enter image description here

Thanks for any help.

Solution

  • Check all steps:

    # Steps:
    # 1 - Create (static) folder in Root Directory of Project
    # 2 - Paste Your Static Files Folder in (static) Folder (js,css,images...etc)
    # 3 - Now Do Setting in (setting.py)
          STATIC_URL = '/static/'

          STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
    # 4 - add {% load static %} tag on top of html page
    # 5 - Now use ({% static 'assets/image.jpg' %}) tag in HTML File for calling static files
    # 6 - Done