イメージは正しくHTMLに挿入されますが、表示されません。サイズは0です。0 * 0px

Question

フォルダからすべてのイメージを表示するには、ブートストラップカルーセルのHAMLテンプレートを使用しています。

画像は、0×0ピクセルのサイズで表示しないでください。これを設定するCSSプロパティはありません。要素の幅はCSSでは100％に設定され、ブラウザコンソールでサイズを変更しても何もしません。

すべての画像はブラウザから直接アクセスできます（http://localhost:4567/car-images/fb_1.jpgなど）。404エラーはありません。

これはRubyコードのブロックとのHAMLテンプレートです：

.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 

そして、これは、それがブラウザでレンダリングする方法です：

また

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

、ビューを実行しているRubyコード：

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 

私は約2.5時間この問題を解決しようとしており、初心者でもありませんlutions。

Answer 1

あなたのグローバルの使用は悪い習慣です。変数スコープと定数の使用について学ぶことをお勧めします。最終的になぜグローバルなものを使うのか、なぜそれを避けるのが良いかを学びます。

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 

ではなく、パスの区切り文字を使用すると、Rubyはそれが何であるかを判断し、それを供給させてください/であることを前提としています。問題の

コードは次のように多くの慣用的に書くことができます。 File.joinを使用すると、Rubyはそれを実行できます。 IO classとjoinについては、ドキュメントの冒頭を参照してください。

ブラウザに表示されるHTMLを信頼できません。ブラウザはHTMLを修正することができます。 curlまたはwget、Ruby用のさまざまなHTTPクライアント、さらにはHAML自体を使用して、ブラウザを使用せずに出力されたHTMLを表示することができます。私はそれに慣れることをお勧めします。ブラウザがページをどのようにレンダリングするかを知る必要がありますが、レンダリングされたHTMLを本当のHTMLの正確なレンダリングと信用しないだけです。

0x0の画像サイズについて：テンプレートを変更してサイズを設定するか、CSSを追加してそのクラスのすべての画像に対して行うことができます。私はCSSを追加しますが、あなたはそれを1つまたは別の場所で行う必要があります。デフォルトでは、ブラウザはイメージをネイティブサイズで表示する必要があります。そのため、ブラウザに0x0に設定して、それを上書きする必要があります。おそらく、画像のスタイル属性を見れば、問題がどこにあるのかを知ることができます。