html - 如何使用 MirrorAPI 生成 3x2 图像结果网格？

Question

什么是正确的 HTML/JSON 语法来生成格式为“6 imges on a grid”的时间轴卡片，就像内置图像搜索生成的那样？附上 sample 。我希望它成为我的玻璃器皿生成的响应包的引导卡。

Answer 1

您可以使用带有 HTML 的标准 CSS 来生成图片。一个这样的例子(使用 Playground 来验证)如下并且似乎有效:

{
  "html": "<style>\n.box {\n  width: 210px;\n  height: 180px;\n  float: left;\n  border: thin solid white;\n}\n</style>\n\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n\n",
  "notification": {
    "level": "DEFAULT"
  }
}

这使用带有图像的 float div 来实现效果。您也可以出于相同目的使用表格。