Bilder, die korrekt in HTML eingefügt, aber nicht angezeigt werden - Größe ist 0 * 0px

Question

Ich verwende eine HAML-Vorlage eines Bootstrap-Karussells, um alle Bilder aus einem Ordner anzuzeigen.

Die Bilder sollten nicht mit einer Größe von 0 mal 0 Pixel angezeigt werden. Es gibt keine CSS-Eigenschaft, die dies festlegen würde, die Breite des Elements wird in CSS auf 100% gesetzt, und selbst das Ändern der Größe in einer Browserkonsole tut nichts.

Alle Bilder sind ansonsten direkt von einem Browser zugänglich (wie http://localhost:4567/car-images/fb_1.jpg) und es gibt keine 404 Fehler.

Dies ist die HAML Vorlage mit einem Block von Ruby-Code:

.col-sm-6#carousel 
     .carousel.slide#myCarousel{ "data-ride" => "carousel", :style => "height:inherit"} 
      %ol.carousel-indicators 
      .carousel-inner{ :role => "listbox"} 
       - @images.each do |image| 
        .item 
         %img{ :src => "car-images/#{image}"} 
      %a.left.carousel-control{ "data-slide" => "prev", :href => "#myCarousel", :role => "button"} 
       %span.glyphicon.glyphicon-chevron-left{ "aria-hidden" => "true"} 
       %span.sr-only Previous 
      %a.right.carousel-control{ "data-slide" => "next", :href => "#myCarousel", :role => "button"} 
       %span.glyphicon.glyphicon-chevron-right{ "aria-hidden" => "true"} 
       %span.sr-only Next 

Und das ist, wie es in einem Browser rendert:

<div class='col-sm-6' id='carousel'> 
     <div class='carousel slide' data-ride='carousel' id='myCarousel' style='height:inherit'> 
     <ol class='carousel-indicators'></ol> 
     <div class='carousel-inner' role='listbox'> 
      <div class='item'> 
      <img src='car-images/fb_1.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_2.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_3.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_4.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_5.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_6.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_7.jpg'> 
      </div> 
      <div class='item'> 
      <img src='car-images/fb_8.jpg'> 
      </div> 
     </div> 
     <a class='left carousel-control' data-slide='prev' href='#myCarousel' role='button'> 
      <span aria-hidden='true' class='glyphicon glyphicon-chevron-left'></span> 
      <span class='sr-only'>Previous</span> 
     </a> 
     <a class='right carousel-control' data-slide='next' href='#myCarousel' role='button'> 
      <span aria-hidden='true' class='glyphicon glyphicon-chevron-right'></span> 
      <span class='sr-only'>Next</span> 
     </a> 
     </div> 
    </div> 

Auch der Code Rubin, der die Ansicht läuft:

Ich habe versucht, dies für etwa 2,5 Stunden jetzt zu lösen, und ein Anfänger zu sein, ich weiß nichts davon Lösungen.

Answer 1

Ihre Verwendung eines globalen ist schlechte Praxis. Ich würde empfehlen, etwas über das variable Scoping und die Verwendung von Konstanten zu lernen. Irgendwann werden Sie erfahren, warum und wann Sie ein globales verwenden sollten, aber bis es besser wäre, sie zu vermeiden.

CAR_IMG_DIR = 'public/car-images' 

get '/' do 
    @images = Dir.foreach(CAR_IMG_DIR).select { |x| File.file?(File.join(CAR_IMG_DIR, x)) } 
    haml :index 
end 

Anstatt davon aus, dass der Pfad Trennzeichen ist / Sie sollten lassen Rubin bestimmen, was es ist, und liefern es:

Der Code in Frage mehr idiomatisch wie könnte geschrieben. Mit kann Ruby das tun. Siehe Anfang der Dokumentation für die IO class und join.

Sie können dem HTML, das der Browser Ihnen anzeigt, nicht vertrauen. Browser können und werden HTML modifizieren. Sie können curl oder wget oder verschiedene HTTP-Clients für Ruby oder sogar HAML selbst verwenden, um das ausgegebene HTML anzuzeigen, ohne dass der Browser in die Quere kommt. Ich würde empfehlen, sich daran zu gewöhnen; Sie müssen immer wissen, wie der Browser die Seite rendern wird, aber vertrauen Sie dem gerenderten HTML nicht, um eine genaue Wiedergabe des echten HTML zu sein.

In Bezug auf die Bildgröße von 0x0: Sie können Ihre Vorlage ändern, um die Größe festzulegen, oder Sie können CSS hinzufügen, um es für alle Bilder dieser Klasse zu tun. Ich würde das CSS hinzufügen, aber Sie müssen es an der einen oder anderen Stelle tun. Standardmäßig sollte der Browser die Bilder in ihrer ursprünglichen Größe anzeigen, sodass der Browser den Browser auf 0x0 setzen muss und Sie ihn überschreiben müssen. Wenn Sie sich die Stilattribute der Bilder ansehen, erhalten Sie eine Vorstellung davon, wo das Problem liegt.