amp-html - 是否可以在线显示 amp-img?
问题描述
以下代码仅显示第一张图像。第二张图找不到了:
<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,使用 class 以获得更好的方法。
示例:点击这里
CSS 代码:
<style amp-custom>
.your-class { display:inline-block; }
</style>
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>
推荐阅读
- python - 在 pyMC3 中创建确定性变量矩阵
- docker - 詹金斯在运行新容器时使用旧数据
- html - 使用宽度使两列相等
- java - 如何修复此错误:不兼容的类型:从 int 到 byte 的可能有损转换
- python - 'int' 和 'NoneType' 的实例之间不支持 '<'
- google-data-studio - 在 Google Data Studio 中将纪元时间格式化为小时分钟
- python - 如何更新 Flask-SQLAlchemy 关联表?
- r - 相交两个排序列表
- terraform - Terraform 兼容性错误 - 未使用 count.index
- apache-kafka - 无法使用 kafka 流将 AVRO 对象写入另一个主题