Amp html 是否可以在线显示amp img？_Amp Html

Amp html 是否可以在线显示amp img？

amp-html

Amp html 是否可以在线显示amp img？,amp-html,Amp Html,以下代码仅显示第一个图像。第二张图片不见了： <div> <amp-img layout="fixed" width="100" height="200" style="display:inline-block;" src="~/Content/images/foo1.png" /> <amp-img layout="fixed" width="100" height="200" style="display:inline-block;" src="

以下代码仅显示第一个图像。第二张图片不见了：

<div>
    <amp-img layout="fixed" width="100" height="200" style="display:inline-block;" src="~/Content/images/foo1.png" />
    <amp-img layout="fixed" width="100" height="200" style="display:inline-block;" src="~/Content/images/foo2.png" />
</div>

是的，如果有可能，您可以在AMP中使用内联css。代替内联css，使用类实现更好的方法

例如：

CSS代码：

 <style amp-custom>
    .your-class { display:inline-block; }
  </style>


.您的类{display:inline block；}

HTML代码：

<amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>
  <amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>
  <amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>

完整代码：

<!--
## Introduction

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- ## Head -->
<!-- -->
<head>
  <!-- The charset definition must be the first child of the `<head>` tag. -->
  <meta charset="utf-8">
  <title> Hello World</title>
  <!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!--
    AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
  -->
  <link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
  <!--
    AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
  -->
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!--
    CSS must be embedded inline.
  -->
  <style amp-custom>
    .your-class { display:inline-block; }
  </style>
  <!--
    The AMP boilerplate.
  -->
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- ## Body -->
<!-- -->
<body>
  <!--
    Most HTML tags can be used directly in AMP HTML.
  -->
  <h1>Hello World!</h1>
  <!--
    Certain tags, such as the `<img>` tag, are replaced
    with equivalent or slightly enhanced custom AMP HTML tags (see
    [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).

    You can use the [ AMP Validator ](https://www.ampproject.org/docs/guides/validate.html) to check
    if your AMP HTML file is valid AMP HTML. Simply
    add `#development=1` to an AMP URL. Validation errors will be printed in the Javascript console.
    You can try it with this website which is build with AMP.

    Check out the [other examples](/) to learn more about AMP.
  -->


  <amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>
  <amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>
  <amp-img class="your-class" src="https://dummyimage.com/100x100/F00/FFF" width="100" height="100" layout="fixed"></amp-img>

</body>
</html>


你好，世界
.您的类{display:inline block；}
body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
你好，世界！
非常感谢您提供的详细说明。我真的很困惑，因为我第一次尝试了您的答案，它成功了；然后我切换了内联样式，它也成功了。我不知道昨天为什么不成功。