srcset的图像裁剪关系。

Question

如果执行成功，则 srcset 属性为 img 与此相关的标签 疑问 关于用省略号响应图片。我按照建议只包含 img 元素，而不是带有背景图片风格的多个 img 和 div。我使用了 object-position 风格来定位元素，其值来自 focalPointToBackgroundPosition 这对于焦点来说非常好用。

遗憾的是，我无法将裁剪值传递到图像的url中。srcset 属性。我的意思是，当图像由默认的 src 属性与 apos.attachments.url 帮助器。

/uploads/attachments/imagename.93.10.1745.873.full.jpg

据我了解，在 apostrophe-images/lib/api.js 应该是可以的，因为您已经用 cropRelationship 所以我觉得我的代码有问题。

<img data-image
  src="{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}"
  srcset="{{ apos.images.srcset(image.attachment) }}"
  sizes="(max-width:600px) 120vw, 58vw"
  alt="{{ image.title }}"
  {%- if apos.attachments.hasFocalPoint(relationship) -%}
    style="object-position: {{ apos.attachments.focalPointToBackgroundPosition(relationship) }}"
  {%- endif -%}
>

{{ apos.area(piece, 'content', {
    limit: 2,
    widgets: {
      'card': {
        size: 'full'
        aspectRatio: [ 2, 1 ],
        controls: {
          cloneable: false,
          removable: true,
          position: 'top-right'
        }
      }
    }
}) }}

Answer 1

我想出了解决方案。所以，如果你想使用裁剪的图像与Srcset，你需要添加以下内容 relationship 到 srcset 这样的属性。

srcset="{{ apos.images.srcset(image.attachment, relationshiop) }}"