Images correctement insérées en HTML mais non affichées - la taille est 0 * 0px

Question

J'utilise un modèle HAML d'un carrousel bootstrap pour afficher toutes les images d'un dossier.

Les images ne doivent pas être affichées avec une taille de 0 par 0 pixels. Il n'y a pas de propriété CSS qui définirait cela, la largeur de l'élément est définie sur 100% en CSS et même changer la taille dans une console de navigateur ne fait rien.

Toutes les images sont accessibles directement à partir d'un navigateur (comme http://localhost:4567/car-images/fb_1.jpg) et il n'y a pas d'erreurs 404.

Ceci est le modèle HAML avec un bloc de code Ruby:

.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 

Et voici comment cela rend dans un navigateur:

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

En outre, le code Ruby qui court la vue:

require 'sinatra' 
require 'haml' 

$car_img_dir = 'public/car-images' 

get '/' do 
    @images = Dir.foreach($car_img_dir).select { |x| File.file?("# {$car_img_dir}/#{x}") } 
    haml :index 
end 
get '/about' do 
    haml :about 
end 

get '/products' do 
    haml :products 
end 

J'ai essayé de résoudre ce pendant environ 2,5 heures maintenant, et d'être un débutant, je ne connais aucune sorte lutions.

Answer 1

Votre utilisation d'un global est une mauvaise pratique. Je vous recommande d'en apprendre davantage sur la portée des variables et l'utilisation de constantes. Finalement, vous apprendrez pourquoi et quand utiliser un global mais jusqu'à ce qu'il soit préférable de les éviter.

Le code en question pourrait être écrit plus idiomatiques comme:

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 

Au lieu de considérer que le caractère séparateur de chemin est / vous devriez laisser Ruby déterminer ce qu'elle est et lui fournir. Utiliser File.join permet à Ruby de le faire. Voir le début de la documentation pour le IO class et join.

Vous ne pouvez pas faire confiance au code HTML que le navigateur affiche. Les navigateurs peuvent, et vont, modifier HTML. Vous pouvez utiliser curl ou wget, ou divers clients HTTP pour Ruby, ou même HAML lui-même, pour voir le code HTML émis sans que le navigateur ne vous gêne. Je recommande de m'habituer à faire cela; Vous devez toujours savoir comment le navigateur affichera la page, mais ne faites pas confiance à son rendu HTML pour obtenir une interprétation fidèle du vrai HTML. En ce qui concerne la taille de l'image de 0x0: Vous pouvez changer votre modèle pour définir la taille, ou vous pouvez ajouter CSS pour le faire pour toutes les images de cette classe. J'ajouterais le CSS, mais vous allez devoir le faire à un endroit ou à un autre. Par défaut, le navigateur doit afficher les images dans leur taille native, donc quelque chose dit au navigateur de le mettre à 0x0 et vous devez le remplacer. Peut-être que regarder les attributs de style des images vous donnera une idée du problème.