Cannot insert an image into HTML document

Question

I am trying to insert an image ("logo_footer.png") in an HTML document that I am working on. It is a Python web app and I am using the TurboGears 2 Framework. I have tried several different methods, and none of them are working for me:

Method 1:

.logo-footer { 
  border: 1px solid green;
  height:140px; width: 600px;
  background: transparent url('{{url2(tg.url("/images/atenea/logo_footer.png"))}}');
  background-position: right center !important;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
}

Method 2:

<div class="pie">
  <div class="logo-footer">
     <img height="120" src="{{tg.url('/images/atenea/logo_footer.png')}}">
  </div>
  <div class="firma-footer">
     <div class="dato-empresa">Blabla</div>
  </div>
</div>

Of course, the image exists. Am I missing something really basic and obvious here?

Why can't I even make the image appear using the <img> tag?

UPDATE:

In the end, it turned out that the problem was with the wkhtmltopdf library that I'm using to convert the HTML to a PDF document. For whatever reason that I am still unaware of, the image appears in the HTML version of my document but it doesn't appear in the pDF version generated by wkhtmltopdf.

Answer 1

<img height="120" src="images/atenea/logo_footer.png" />

Assuming they are in images folder then ateanea folder from the current script in the CSS one try

background: transparent url("/images/atenea/logo_footer.png");

taking the curly's off