Question

我正在使用引导程序轮播的HAML模板来显示文件夹中的所有图像。

图像不应显示为0 x 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个小时，作为初学者，我不知道任何解决方案。

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或各种HTTP客户端来使用Ruby，甚至使用HAML本身来查看发出的HTML，而不会影响浏览器。我建议你习惯这样做;您始终需要知道浏览器将如何呈现页面，但不要相信其呈现的HTML是真实HTML的准确再现。

关于0x0的图像大小：您可以更改模板以设置大小，或者您可以添加CSS以对该类的所有图像执行此操作。我会添加CSS，但你必须在一个地方或另一个地方做。默认情况下，浏览器应该以原始大小显示图像，因此有些东西告诉浏览器将其设置为0x0，您需要覆盖它。也许查看图像的样式属性可以让您了解问题所在。

图像正确插入HTML但未显示 - 大小为0 * 0px

1 个答案: