Изображения, вставленные в HTML правильно, но не отображаемые - размер 0 * 0px

Question

Я использую шаблон HAML для карусели бутстрапа для отображения всех изображений из папки.

Изображения не должны отображаться с размером 0 на 0 пикселей. Не существует свойства CSS, которое будет устанавливать это, ширина элемента устанавливается в 100% в CSS и даже изменение размера в консоли браузера ничего не делает.

Все изображения доступны непосредственно из браузера, в противном случае (например, http://localhost:4567/car-images/fb_1.jpg) и 404 ошибок.

Это шаблон 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> 

Кроме того, код рубин, который запускает вид:

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 

Вместо того, чтобы предположить, что характер пути разделитель / вы должны позволить Руби определить, что это такое, и поставить его. Использование File.join позволяет Ruby сделать это. См. Начало документации для IO class и join.

Вы не можете доверять HTML-интерфейсу, отображаемому в браузере. Браузеры могут и будут изменять HTML. Вы можете использовать curl или wget, или различные HTTP-клиенты для Ruby или даже самого HAML, чтобы просмотреть выпущенный HTML без возможности браузера. Я бы рекомендовал привыкнуть к этому; Вам всегда нужно знать, как браузер будет отображать страницу, но просто не верьте, что его визуализированный HTML будет точным исполнением реального HTML.

Что касается размера изображения 0x0: вы можете изменить свой шаблон, чтобы установить размер, или вы можете добавить CSS, чтобы сделать это для всех изображений этого класса. Я бы добавил CSS, но вам придется делать это в том или ином месте. По умолчанию браузер должен показывать изображения в своих собственных размерах, поэтому что-то говорит браузеру установить его на 0x0, и вам необходимо переопределить его. Возможно, поиск атрибутов стиля изображений даст вам представление о том, в чем проблема.