无法在共享点列表自定义视图中显示图片

Question

我正在尝试在我的 sharepoint 通信网站上重现此自定义列表： https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/birthday-format

我修改了源代码以适应它，这是我所拥有的：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "25px",
      "max-width": "420px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px lightblue"
    },
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M',[$Picture])",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "130px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Nomtxt]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "=if([$Title] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "max-width": "310px",
          "min-width": "95px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$DateB] <= @now,'block','none')"
                },
                "attributes": {
                  "iconName": "BirthdayCake"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "=if([$Today_Date] == [$BirthdayD],'Happy Birthday!', 'Next Birthday')"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$DateB] == '', 'none', 'block')",
                  "padding-left": "0px",
                  "font-size": "14px"
                },
                "txtContent": "[$DisplayBirth]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$DateB] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No Birthday Entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            }
          }
        ]
      }
    ]
  }
}

不幸的是，当“图片”字段不为空时，图片不会出现：

What it looks like

这里我刚刚在我的行中放了一张图片。

我不知道该怎么做才能解决这个问题。 如果您有解决此问题的任何信息，请提供帮助。

谢谢， 雅尼克·克里顿

Answer 1

答案

图片列需要是超链接类型。

推理

很可能，您使用了“图像”类型。图像可能看起来正确。而且，它位于可供选择的默认列类型列表中。但是，来自 GitHub 的 JSON 代码示例和您链接到的修改版本都取决于返回图像地址的列。

当我使用 Image 类型的列尝试示例时，它失败了。当我用超链接尝试它时，它起作用了。从“+ 添加列 > 超链接”

添加该类型的列

背景

我怀疑示例作者使用 Hyperlink 类型而不是 Image 类型的原因是 Image 类型相对较新。以前，超链接类型称为“超链接或图片”。 [The official reference on List and library column types][1] 在“经典”部分显示“超链接和图片”类型。