Middleman设置了动态资产路径

Question

我正忙着使用middleman构建一个静态网站，我终于让它正常投放，只有当我运行build时，我的所有图片都不会显示。过了一会儿，我想我知道发生了什么事。

我的配置如下：

activate :livereload
set :relative_links, true
set :partials_dir, 'partials'
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :build_dir, 'public_html'

# Build-specific configuration
configure :build do
  # For example, change the Compass output style for deployment
  activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript

  # Enable cache buster
  # activate :asset_hash

  # Use relative URLs
  activate :relative_assets

  # Or use a different image path
  # set :http_prefix, "/images/"
end

在我的偏见中，我像这样引用我的图像（注意：我正在使用haml）：

%ul.features
  %li.third
    %p
      %img{:src=>"../images/icon1.png", :class=>"left"}
      %span 2 days, 20 speakers, single track

我也有全局部分，在每个文件中使用的几乎比partials文件夹更深一层。

当我运行middleman build时，它会将我的所有部分编译为在根级别public_html文件夹中找到的html / css / js，但是我的所有图像都丢失了，在检查页面后我看到了图像指向比它们应该高一级的文件夹。

<div class='wrapper'>
  <a name='about'></a>
  <h1>
    <a alt='RubyFuza Home' href='/'>
      <img src='../images/logo.png'>

目录如下所示：

您将看到源部分需要遍历一个级别才能到达图像文件夹，因此在路径引用之前需要../，但是使用middleman build构建的文件只需要查看在同一目录级别。

有没有办法配置中间人在x级别的源代码中查找图像，但是当你构建为在y级别找到图像时？然后只引用像%img{:src=>"icon1.png"}这样的html中的图像，而不是提供整个路径？

Answer 1

尝试image tag帮助：

<%= image_tag 'logo.svg', :alt => 'My app', :class => "logo" %>

然后图片文件位于source/images下，config.rb放置set :images_dir, 'images'