Question

我正在使用jekyll响应式图像插件。我有一个像我应该的模板，它可以到达模板和CSS。它确实呈现了img代码，但是路径错误并且不呈现任何调整大小的图像。

这是我的模板：

{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}

{% capture class_caption_tuple %}
class="pic caption"
{% endcapture%}

{% capture class_pic_tuple %}
class="pic"
{% endcapture%}

{% if alt %}
{% capture alt_tuple %}
alt="{{ alt }}"
{% endcapture%}
{% endif %}

{% if width %}
{% capture width_tuple %}
width="{{ width }}"
{% endcapture%}
{% capture styled_width_tuple %}
style="width:{{ width }};"
{% endcapture%}
{% endif %}

{% if title %}
{% capture title_tuple %}
title="{{ title }}"
{% endcapture%}
{% endif %}

{% if class %}
{% capture class_pic_tuple %}
class="pic {{ class }}"
{% endcapture%}
{% capture class_caption_tuple %}
class="pic caption {{ class }}"
{% endcapture%}
{% endif %}

{% assign largest = resized | sort: 'width' | last %}

{% if caption %}
<div {{ class_caption_tuple | strip_newlines }} {{ styled_width_tuple | strip_newlines }}>
  {% endif %}
  {% if url%}
  <a href="{{ url }}" target="_blank">
    {% endif %}
    <img src="/{{ largest.path }}" srcset="{{ srcset | strip_newlines }}" {{ alt_tuple | strip_newlines }}
      {{ title_tuple | strip_newlines }} {{ class_pic_tuple | strip_newlines }} {{ width_tuple | strip_newlines }}>{%
    if url%}</a>{% endif %}{% if caption %}{{ caption | strip_newlines }}</div>{% endif %}

这是我的配置：

responsive_image:
  # [Required]
  # Path to the image template.
  template: _includes/responsive-image.html

  # [Optional, Default: 85]
  # Quality to use when resizing images.
  default_quality: 90

  # [Optional, Default: []]
  # An array of resize configuration objects. Each object must contain at least
  # a `width` value.
  sizes:
    - width: 255
    - width: 510
    - width: 1020

  # [Optional, Default: false]
  # Rotate resized images depending on their EXIF rotation attribute. Useful for
  # working with JPGs directly from digital cameras and smartphones
  auto_rotate: false

  # [Optional, Default: false]
  # Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
  # at Google PageSpeed.
  strip: false

  # [Optional, Default: assets]
  # The base directory where assets are stored. This is used to determine the
  # `dirname` value in `output_path_format` below.
  base_path: assets

  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
  # The template used when generating filenames for resized images. Must be a
  # relative path.
  #
  # Parameters available are:
  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
  #   %{width}       Width of the resized image
  #   %{height}      Height of the resized image
  #
  output_path_format: assets/responsive/%{width}/%{basename}

  # [Optional, Default: true]
  # Whether or not to save the generated assets into the source folder.
  save_to_source: false

  # [Optional, Default: false]
  # Cache the result of {% responsive_image %} and {% responsive_image_block %}
  # tags. See the "Caching" section of the README for more information.
  cache: false

  # [Optional, Default: []]
  # By default, only images referenced by the responsive_image and responsive_image_block
  # tags are resized. Here you can set a list of paths or path globs to resize other
  # images. This is useful for resizing images which will be referenced from stylesheets.
  extra_images:
    - assets/foo/bar.png
    - assets/bgs/*.png
    - assets/avatars/*.{jpeg,jpg}

这是我的响应式img呼叫者：

{% responsive_image path: "img/seo_img.png" alt: "Prolike" caption: "Caption." class: "center medium" %}

这是我得到的图像。

<img src="/" srcset=" " alt="Prolike" class="pic center medium">

为什么将路径呈现为“ /”？以及为什么不急于渲染图像。

Jekyll响应式图像插件无法渲染

0 个答案: