时间戳

首页 > 解决方案 > 如何显示 wordpress 内容图像 api

wordpress - 如何显示 wordpress 内容图像 api

问题描述

我想在我的颤振应用程序中显示图像内容。我使用 wordpress api。我用这个类来展示特色媒体、标题和内容

 Post.fromJson(Map<String, dynamic> json)
  : title = json['title']["rendered"],
    excerpt = json['excerpt']["rendered"],
    image = json["_embedded"]['wp:featuredmedia'][0]["media_details"]
        ["sizes"]["medium"]["source_url"],
    date = json['date'],
    content = json['content']["rendered"],
      id = json['id'];

这是wordpress内容

“内容”：{“渲染”：“首相警告国会议员，他们试图阻止无协议脱欧，正在损害他与欧盟达成协议的机会。

\n

鲍里斯·约翰逊（Boris Johnson）表示，英国将于 10 月 31 日“要么死要么死”离开欧盟——这促使一些国会议员采取行动，阻止英国在没有达成协议的情况下离开欧盟。

\n

但他表示，越多的国会议员试图阻止无协议脱欧，“我们就越有可能最终陷入这种境地”。

\n

此前，总理宣布他将在 9 月和 10 月暂停议会五周。

\n

约翰逊先生表示，这是为了让政府能够举行一次女王演讲，并为未来勾勒出“非常激动人心的议程”。

\n

但批评人士称，他的意图是阻止下议院采取任何行动来阻止不达成协议。

\n

https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l-300x205.jpg\" alt=\"\" width=\"300\" height=\"205\ “ srcset=\” https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l-300x205.jpg 300w，https: //iraqmedianews.com/wp-content/uploads/ 2019/08/file-20181002-85614-vu0p6l-768x524.jpg 768w，https: //iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l.jpg 926w\"sizes=\ "(最大宽度: 300px) 100vw, 300px\" />

\n", "受保护": false },

标签： wordpressapiflutter

解决方案

获得该图像的链接后，您可以使用Image.network来显示该图像。

带有解决方案的示例代码：

    String imageUrl,rawString,i,j;
    [...]
    // At some point of your code
    rawString  = json['content']["rendered"];   
    for(int i=0;i<rawString.length;i++) if(rawString[i]=='=' && rawString[i-1]=='t' && rawString[i-2]=='e' && rawString[i-3]=='s' && rawString[i-4]=='c' && rawString[i-5]=='r' && rawString[i-6]=='s') 
for(j=i+3;(rawString[i]=='.' && (rawString.substring(j,j+4)=="jpg")||rawString.substring(j,j+4)=="png");j++)
   imageUrl = rawString.substring(i,j+4);
    [...]
    // The place where you want to display your widget
    Image.network(
      imageUrl, // Can add more attributes 
    );

我刚刚使用逻辑 AND 有效地找到了 'srcset='，然后尝试通过查找文件扩展名来将链接作为子字符串获取。

它可能不适用于所有情况，但有总比没有好。

如果您遇到任何其他类似的问题，并且如果您没有时间实现自己的逻辑，请使用htmlFlutter 官方开发团队开发的包。

https://pub.dev/packages/html

或者，您甚至可以参考这两个包中的任何一个（因为您使用的是 wordpress），

https://pub.dev/packages/flutter_wordpress

https://pub.dev/packages/wordpress_api

推荐阅读