如何在您现有的 REACT 网站上集成 AMP（Accelerated Mobile Pages）？答案

【问题标题】：How to integrate AMP (Accelerated Mobile Pages) on your existing REACT website?如何在您现有的 REACT 网站上集成 AMP（Accelerated Mobile Pages）？
【发布时间】：2018-03-25 09:45:11
【问题描述】：

我目前正在开发一个用 React.js 编写的 PWA 应用程序，并且我正在使用 VScode 编辑器。我已阅读 AMP 文档，其中将您的 HTML 媒体标签替换为 AMP 等效的 AMP 媒体标签。但是当我将<img src="" alt="" /> 替换为<amp-img src="" alt="" ></amp-img> 时，我的vscode 编辑器会自动将其更正为<amp-img src="" alt="" />，从而导致

状态：AMP 验证失败

在网络视图中，由于这个问题，我的图像不可见。

请帮忙。

【问题讨论】：

这也是正确的，您需要添加图像的布局、宽度和高度：stackoverflow.com/a/43486648/5635098
@BachchaSingh 不，这不是正确的语法，在 AMP 文档中明确提到 amp-img 必须使用结束标签，我还尝试使用但代替图像，它显示的是空白空间。
应该是这些都需要。访问我检查过的这个链接：preview.ibb.co/juHnun/amp_pass.png

标签： reactjs amp-html

【解决方案1】：

除了@Bachcha Singh 的评论，您可能还想查看link 以验证 AMP 网页。此外，您不能仅仅通过替换几个标签就将您的网站转换为 AMP。您的网站必须遵循 AMP HTML specification。检查此thread。您也可以查看tutorial，了解如何结合 AMP 和 PWA。

【讨论】：

我已经遵守了此链接ampproject.org/docs/fundamentals/validate 以及此链接ampproject.org/docs/fundamentals/spec 中存在的所有规则，之后只有我在问这个问题。但我认为ampproject.org/latest/blog/… 这个链接可能对我有用。但我必须深入研究它，了解其中给出的项目。