Question

我正在尝试编写一个Jekyll插件，它计算图像的宽高比并将其包装在该大小的容器中，以避免在加载页面时重新流动。我正在使用fastimage来计算比率，现在它看起来像这样：

require 'fastimage'

module Jekyll
  class PlaceholderImageTag < Liquid::Tag

    def initialize(tag_name, markup, tokens)
      super
      @image_url = 'image_url'
    end

    def render(context)
      @index = Liquid::Template.parse("{{ forloop.index | minus: 1 }}").render(context)
      @base_url = Liquid::Template.parse("{{ site.#{@image_url} }}").render(context)
      @src = Liquid::Template.parse("{{ page.images[#{@index}].image }}").render(context)

      @size = FastImage.size("http://localhost:4000/public/images/"+@src)
      @ratio = (@size[1]*1.0/@size[0])*100

      placeholder = "<div class='placeholder' style='padding-bottom:#{@ratio}%'>"
      placeholder += "<img src=\"#{@base_url}\/#{@src}\"/>"
      placeholder += "</div>"
    end
  end
end

Liquid::Template.register_tag('placeholder_img', Jekyll::PlaceholderImageTag)

问题是，当我在本地构建我的站点（localhost：4000）时，FastImage返回并出错 - 如果我将FastImage指向不同的本地服务器（如MAMP）或我的生产URL，它可以正常工作，但是使用jekyll服务器简直失败了。

是否可以在不指向单独服务器的情况下使FastImage正常工作？

Answer 1

如果在启动jekyll之前站点源代码中没有placeholder_img标记，我发现我可以运行类似的插件。

所以问题是，当你启动jekyll时，它会尝试在服务器运行之前构建静态文件，因此此时不能通过FastImage获取图像。

尝试像这样开始jekyll

jekyll serve --skip-initial-build

然后，只要任何文件被更改，jekyll就会成功重新生成并提供服务。

如果在jekyll未运行时更改了某些文件以触发重新生成，或者只是在服务器运行后运行jekyll build，则可能需要触摸这些文件。

使用FastImage的Jekyll插件会返回本地图像的错误

1 个答案: