0

我想用 amp-list 读取静态文件夹中的本地 json 文件并将其显示到 UI 中。这就是我现在的做法。

<amp-list credentials="include" width="100vw" height="68vw" layout="responsive" src="/static/data/test.json" items="." single-item class="news-size">
            <template type="amp-mustache">
              <amp-base-carousel dir="ltr" width="100vw" height="68vw" heights="(min-width: 769px) 30.5vw, (min-width: 501px) 38vw, 68vw" layout="responsive" advance-count="1" visible-count="(min-width: 769px) 3.2, (min-width: 501px) 2.5, 1.4" snap-by="1" style="background:transparent" loop="true">
                
                <a href="{{url}}" style="text-decoration:none">
                  <div class="hp-container">
                    <amp-img class="hp-img" src="/static/test.png" width="80vw" height="80vw" layout="responsive"></amp-img>
                    <div class="hp-inset-shadow"><p class="hp-title">AA {{title}}</p></div>
                  </div>
                </a>
                
              </amp-base-carousel>
            </template>
          </amp-list>

这是我的 /static/test.json

{
    "items": [
       {
          "title": "Christmas Image 1",
          "url": "images/christmas1.jpg"
       },
       {
          "title": "Christmas Image 2",
          "url": "images/christmas2.jpg"
       },
       {
          "title": "Christmas Image 3",
          "url": "images/christmas3.jpg"
       },
       {
          "title": "Christmas Image 4",
          "url": "images/christmas4.jpg"
       }
    ]
 }

目前，我不太关心 URL，我只想在 UI 中显示标题但它没有显示。这是目前的结果。

当前结果图片

如您所见，它只显示了我在 HTML 文件中硬编码的“AA”，并且在 json 文件中没有显示任何标题。

加法：我使用烧瓶作为后端。

有人可以帮我解决这个问题吗？我感谢您的帮助。

4

0 回答 0