다음 유효성 검사 오류 메시지는 특별한 주의가 필요합니다.
The tag 'img' should be replaced with an equivalent 'amp-img' tag
태그
'img'을(를) 동등한 'amp-img' 태그로 교체해야 합니다.
기존의 HTML 태그 사용에 대해 제한을 가하는 첫 번째 오류입니다. 기본적으로 img 태그가 AMP에서 허용되지 않는다는 것을 알려줍니다. 대체 태그로 amp-img를 사용합니다.
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you
mean 'amp-img'?
'img'태그는 'noscript'태그의 하위 항목으로만 나타날 수
있습니다. 'amp-img'를 의미합니까?
<img> 태그 대신 <amp-img>로 바꿔
보겠습니다.
<amp-img src="sample.png"></amp-img>
</amp-img>태그로 닫히는지를 꼭 확인하세요.
img 태그는 void 태그이므로 닫을 필요가 없습니다. 그러나
amp-img의 경우는 다릅니다. 태그를 닫아야 합니다.
새로 고침을 누르고 개발자 도구 콘솔을 확인합니다. 문제 해결이 잘 되지 않았습니다. 이미지가 표시되지 않고 유효성 검사기가 또 다른 오류 메시지를 표시합니다.
Incomplete layout attributes specified for tag 'amp-img'. For example,
provide attributes 'width' and 'height'.
'amp-img'태그에 불완전한
레이아웃 속성이 지정되었습니다. 예를 들어 'width'및 'height'속성을
제공하십시오.
첫 번째 오류는 layout 속성에 대한 것이고 두 번째 오류는
width 속성과 height 속성에 대한 것입니다. 너비와
높이 속성을 모두 지정해 보겠습니다.
<amp-img src="sample.png"
width="2048"
height="813">
</amp-img>
둘 중 하나라도 생략하면 다음에 유효성을 검사할 때 오류가 표시되므로 항상 amp-img 태그의 너비와 높이를 지정해야 합니다.
오류 중 하나가 수정되었고 이제 레이아웃 오류를 처리해야 합니다.
amp-img 태그에 layout="responsive" 속성을 추가하면 다음과
같습니다.
<amp-img src="sample.png"
width="2048"
height="813"
layout="responsive">
</amp-img>
페이지를 새로 고침하면 이제 이미지를 볼 수 있고 유효성 검사 오류가 사라집니다.