JSON 在图片旁边添加文字

Question

我对 JSON 很陌生，坦率地说，我不确定如何正确设置我的代码。

目标

使用国家标志格式化 SharePoint 列，并在其旁边显示@currentField 。

当前代码

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://flagpedia.net/data/flags/h20/'+if(@currentField == 'AR','ar',if(@currentField == 'AT','at',if(@currentField == 'AU','au',if(@currentField == 'BE','be',if(@currentField == 'BG','bg',if(@currentField == 'BR','br',if(@currentField == 'BY','by',if(@currentField == 'CA','ca',if(@currentField == 'CH','ch',if(@currentField == 'CM','cm',if(@currentField == 'CN','cn',if(@currentField == 'CO','co',if(@currentField == 'CZ','cz',if(@currentField == 'DE','de',if(@currentField == 'DK','dk',if(@currentField == 'EC','ec',if(@currentField == 'EE','ee',if(@currentField == 'EG','eg',if(@currentField == 'ES','es',if(@currentField == 'FI','fi',if(@currentField == 'FR','fr',if(@currentField == 'GB','gb',if(@currentField == 'GR','gb',if(@currentField == 'GR','gr',if(@currentField == 'HR','hr',if(@currentField == 'HU','hu',if(@currentField == 'IE','ie',if(@currentField == 'IL','il',if(@currentField == 'IN','in',if(@currentField == 'IT','it',if(@currentField == 'LT','lt',if(@currentField == 'LU','lu',if(@currentField == 'LV','lv',if(@currentField == 'MX','mx',if(@currentField == 'NL','nl',if(@currentField == 'NO','no',if(@currentField == 'PA','pa',if(@currentField == 'PE','pe',if(@currentField == 'PL','pl',if(@currentField == 'PT','pt',,if(@currentField == 'RO','ro',if(@currentField == 'RU','ru',if(@currentField == 'SE','se',if(@currentField == 'SK','sk',if(@currentField == 'TR','tr',if(@currentField == 'US','us',if(@currentField == 'UY','uy',if(@currentField == 'ZA','za','no'))))))))))))))))))))))))))))))))))))))))))))))+ '.png'",
        "title": "@currentField"
      }
    }
  ]
}

我知道这很混乱，但这是我知道如何实现我所追求的第一部分的唯一方法，因为我对 JSON 没有任何好处。 这段代码为正确的值提供了正确的图像，尽管我确信它可以更容易地完成。

我将此代码应用到列的格式部分，以将输入的 alpha2 国家代码显示为相应的国家标志。 它工作正常，但我也希望在图像旁边显示@currentField的值，而不是用标志“覆盖”。

我会发布到目前为止我尝试过的内容，但坦率地说，我不知道从哪里开始。 寻找任何指向正确方向的指针，这样我就可以弄清楚如何前进。

Answer 1

我假设提交的值是 alpha2 国家代码，所以我最后做了一个测试 JSON 并且工作正常。 试一试，如果有任何问题，请告诉我。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType":"img",
      "attributes": {
        "src": "='https://flagpedia.net/data/flags/h20/'+ toLowerCase(@currentField)+'.png'"
   }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "6px",
        "white-space": "nowrap",
        "text-transform": "uppercase"
      }
    }
  ]
}

如下所示：

原图：