
Your first AMP component - <amp-img>
The next validation error message is interesting:
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
This error deserves special attention: it's the first error that's complaining about what looks to be standard use of an HTML tag. It's basically telling us that the HTML <img> tag is not permitted in AMP, and it's suggesting an alternative <amp-img>.
Let's try to swap in <amp-img> in place of our <img> tag. Copy this line in instead:
<amp-img src="https://theampbook.com/ch2/lightning.jpg"></amp-img>
Note the closing </amp-img> tag. The HTML img tag is a void tag, which means that it doesn't need to be explicitly closed. However, the same does not hold for amp-img; so you must close it explicitly. Hit reload and check the developer console.
So that didn't work out so well: the image isn't displaying and the validator is reporting the following messages:
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
The mandatory attribute 'height' is missing in tag 'amp-img'.
The first error is complaining about layout, and the second is about a missing height attribute. Let's specify both the width and height attributes (if we omit width we'll see an error about that the next time we validate):
<amp-img src="https://theampbook.com/ch2/lightning.jpg"
width="768"
height="305">
</amp-img>
That fixed one of the errors, but we still need to deal with the layout error. Add the attribute layout="responsive" to the amp-img tag, so it now looks like this:
<amp-img src="https://theampbook.com/ch2/lightning.jpg"
width="768"
height="305"
layout="responsive" >
</amp-img>
When you reload the page, you should now be able to see the image, and the validation errors should be gone.