amp-carousel内嵌套amp-selector时图片无法加载问题咨询

• AMP for Email 环境默认引入的amp-carousel 0.1版本对直接子元素有强校验规则，仅允许标准轮播项节点、amp-img等原生媒体组件作为直接子元素，不识别amp-selector为合法轮播子项。组件初始化时会跳过非合法子节点的内部资源调度逻辑，导致内部amp-img无法被AMP运行时触发加载。
• 布局逻辑冲突：内部amp-selector设置了layout="container"自适应布局，amp-carousel 0.1初始化时会先计算所有轮播项的固定尺寸生成滚动容器，container布局的动态尺寸特性会导致尺寸计算失败，AMP资源预加载调度器会判定内部图片始终不在可视区域，直接终止图片加载流程。
• 反向嵌套（amp-selector包裹amp-carousel）能正常运行，是因为amp-selector对直接子元素的限制更宽松，组件初始化顺序为从外到内，不会阻断内部轮播和图片的资源加载逻辑。

方案1：升级amp-carousel到0.2版本（推荐） #

amp-carousel 0.2版本移除了直接子元素的类型限制，支持任意组件作为轮播项，不会阻断内部嵌套组件的初始化和资源加载，目前主流支持AMP的邮箱（Gmail、Outlook网页版、网易邮箱等）均已兼容该版本。
调整点如下：

1. 将头部组件引入地址替换为0.2版本：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

2. 给amp-carousel标签添加layout="fixed-height"属性匹配设置的60px高度，消除布局计算冲突：

<amp-carousel id="carousel-1" height="60" layout="fixed-height" controls>
  <!-- 原有内部amp-selector和amp-img结构不需要改动 -->
</amp-carousel>

注意：原有复现代码里的图片地址是网页展示页地址，不是图片直链，就算组件加载正常，邮箱的AMP安全代理也会拦截这类非资源类请求，需要替换为直接返回图片二进制流的直链地址。

方案2：用amp-bind自定义选择逻辑，规避嵌套限制 #

如果需要兼容暂不支持amp-carousel 0.2的邮箱客户端，可以完全去掉嵌套的amp-selector组件，用AMP自带的bind能力实现图片选择逻辑，不受组件嵌套规则限制：

• 保留amp-bind组件引入，绑定页面级状态变量存储选中项
• 给每个amp-img添加点击事件，点击时更新选中状态，手动切换选中样式
• 表单提交时，把存储选中项的状态变量同步到表单隐藏域即可，交互效果和amp-selector完全一致。

方案3：拆分选择器单元 #

如果不想改动原有交互实现，可以把amp-selector拆成和轮播项一一对应的独立单元，每个轮播项内只放单个选择器的选项节点，通过全局name属性关联同一组选择器，实现跨轮播项的选择能力，避免多层嵌套组件的初始化冲突。

内容的提问来源于stack exchange，提问作者Dennon