Question

页面有两种版本，amp和non amp。在没有放大器的版本中，文本的布局如下所示：

<p><img src="https://www.example-site.ru/files/12345.jpg" alt="" width="30" height="30"> Some text for example. </p>

在带放大器的版本中，布局变为这样

<p>
  <amp-img layout="responsive" width="1280" height="768" src="https://www.example-site.ru/files/12345.jpg" alt="" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout">
    <i-amphtml-sizer style="padding-top: 60%;"></i-amphtml-sizer>Some text for example <img decoding="async" alt="" src="https://www.example-site.ru/files/12345.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
</p>

由于amp-img标签包含文本，因此在查看amp页面时不会显示该文本，因为它在图片下方。如何避免这种情况？

通常的功能str_ireplace将一个标签更改为另一个标签，而无需执行其他操作。

$this->content = str_ireplace("<img", "<amp-img layout='responsive' width='1280' height='768' ", $this->content);

Answer 1

与<img>是empty element的情况不同，<amp-img>是容器，需要始终使用</amp-img>显式关闭。

因此，您进行的str_ireplace调用将导致文本位于<amp-img>内部，即<amp-img src="...">Some text for example.</amp-img>，使其成为<amp-img>的子代。由于既不是后备也不是占位符，<amp-img>的这个子元素根本不会被渲染。

很难在不了解您要应用的其他转换的情况下提出解决方案，但是我建议您重新考虑您的方法，并确保将<img>标签替换为已正确关闭的<amp-img>标签。

如何使amp-img不包含来自<p>标签的文本

1 个答案: