앵커 태그로 감싸면 Google Amp 반응 이미지가 표시되지 않습니다.

Google 앰프 페이지를 만들 때 반응 형 이미지를 포함해야합니다. 이미지를 클릭 할 수 있도록 클릭하여 앵커 태그를 사용하여 다른 URL로 이동하도록합니다. 앵커 태그로 앰프 이미지를 래핑 할 때까지 모든 것이 완벽하게 작동합니다.이 시점에서 이미지는 더 이상 페이지에 표시되지 않습니다. 고정 또는 플렉스 아이템과 같은 다른 레이아웃 옵션을 사용하면 이미지가 앵커 태그와 함께 표시되는 것으로 나타납니다.앵커 태그로 감싸면 Google Amp 반응 이미지가 표시되지 않습니다.

앰프 유효성 검사 테스트가 통과됩니다.

<a href="www.example.com"> 
    <amp-img layout="responsive" src="/src/photo.JPG" width="2056" height="396"/></amp-img> 
</a>

이 페이지에 렌더링되는 결과 HTML입니다 : 여기

내가 제출하고있는 HTML이다.

<a href="www.example.com"> 
    <amp-img layout="responsive" class="-amp-element -amp-layout-responsive -amp-layout-size-defined" src="/src/photo.JPG" width="2056" height="396"> 
     <i-amp-sizer style="display:block; padding-top: 19.26%"></i-amp-sizer> 
    </amp-img> 
    </a>

보통 i-amp-sizer 태그 뒤에 또 다른 img 태그는 페이지에 표시되는 하나입니다 추가됩니다. 그러나 볼 수 있듯이 img 태그가 사라지는 앵커 태그를 추가하면 나는 왜 이런 일이 일어나고 있는지, 어떻게 고쳐야 할지를 알 수 없다.

출처

2016-12-12 dpst

앵커 태그가없는 'amp-img' 자체가 올바르게 표시 되나요? – thumbtackthief

@thumbtackthief 네, 맞습니다. 다른 태그로 둘러싸는 경우에도 올바르게 표시됩니다. 앵커 태그를 추가 할 때만입니다. – dpst

흥미 롭습니다 : 비슷한 문제가 있지만 'a' 태그는 아무 것도 바뀌지 않는 것 같습니다. http://stackoverflow.com/questions/41107954/amp-image-is-not-appearing – thumbtackthief

내 앰프 사용자 정의 CSS에서 앵커 태그로 display: inline-block을 설정했습니다. 인라인 블록 스타일 태그를 삭제하면 해당 태그가 작동했습니다.

출처

2016-12-13 08:10:36 dpst

앵커 태그로 감싸면 Google Amp 반응 이미지가 표시되지 않습니다.

답변

관련 문제