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

Question

正确的HTML / JSON语法是什么，可以生成格式为'6 imges on a grid'的时间轴卡，就像内置图像搜索一样？附上样品。我希望它能成为我的玻璃器皿产生的响应包的主要卡片。

Answer 1

您可以使用带有HTML的标准CSS来生成图片。一个这样的例子（使用操场验证）跟随并似乎起作用：

{
  "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"
  }
}

这使用带有图像的浮动div来实现效果。你也可以使用一个表来达到同样的目的。

Answer 2

您还可以使用表或列表您想要的内容。只需在文章 class=\"mosaic mosaic6\"

中使用此课程

  {
      "html": "<article class=\"photo\">\n  <ul class=\"mosaic mosaic6\">\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/obama.jpg)\"></li>\n  </ul>\n  <ul class=\"mosaic mosaic6\">\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/obama.jpg)\"></li>\n  </ul>\n </article>\n",
      "notification": {
        "level": "DEFAULT"
      }
    }