0

I tried to import a picture to an HTML Website, the Image is in the same folder as the template is and I made a css class to import the image. When I look on the Website I see the frame of the image but there is only a question mark in it, I am working with Django if that matters. I appreciate any help. Mac user

    <div>

      <img class="header.jpg" src="header.jpg">
  
   </div>

    }

.header-image {

width: 100%; }

    .image-container {
   background-color: azure;
   padding: 16px;
   padding-left: 150px;
   padding-right: 150px;
}
LePa
  • 11
  • 1
  • Hi, i think it similar with this threat. https://stackoverflow.com/questions/901551/how-do-i-include-image-files-in-django-templates isn't it? – Taufik Romadhon Oct 09 '22 at 16:13

3 Answers3

0

Without seeing more of your code, I'm not sure but you may wish to change the class attribute of your image tag to

<img class="header-image" src="header.jpg">

as it's currently pointing to the image file rather than a CSS class

HTH

oldgit
  • 13
  • 5
0

By default django does not search and serve static file in templates directory. you have top put your image in the MEDIA directory set in your settings.py. Documentation here: https://docs.djangoproject.com/en/4.1/howto/static-files/

Lucas Grugru
  • 1,664
  • 1
  • 4
  • 18
  • I did it exactly as it says in the instructions, but it looks like before. **bold** '{% load static %} My image' – LePa Oct 09 '22 at 19:10
  • You do not have to set the full path after `{% static '...`. As said in the documentation, you just have to provide the end path in the MEDIA directory. If you look in the generated html what your code make, you understand you do not set the good URL i think – Lucas Grugru Oct 09 '22 at 19:47
0

Just a wild guess, it could be something like

.image-container {
  background-color: azure;
  padding: 16px 150px 16px 150px;
}
.header-image {
  width: 100%;
}


<div class="image-container">
  <img class="header-image" src="header.jpg">
</div>
bron
  • 1,457
  • 1
  • 9
  • 18