离子不从 url wp-json 和 ionic4 加载图像

Posted 2023-03-31

【中文标题】离子不从 url wp-json 和 ionic4 加载图像

【英文标题】：ionic not load image from url wp-json and ionic4

【发布时间】：2019-08-21 05:30:30

【问题描述】：

当我使用 wp-json 将 ionic 应用程序与 wordpress 博客连接时，所有加载的内容都没有图像，我使用 ion-img 谢谢

screenshot1

screenshot2

screenshot3

screenshot4

screenshot5

这是我的代码： 注意：我在我的 wordpress 博客上使用了多合一的安全插件

  //post.service.ts

  import  Injectable  from '@angular/core';
  import  HttpClient  from "@angular/common/http";
  import Http, Headers, RequestOptions from '@angular/http';

  import  map  from "rxjs/operators";
  import get from "lodash/get";

  @Injectable(
    providedIn: 'root'
  )
  export class PostsService 

    constructor(private http: HttpClient) 
    private baseURL = "domain.com";
    fetchPosts() 
      return this.http
        .get(`$this.baseURL/wp-json/wp/v2/posts?_embed`)
        .pipe(
          map((posts: Array<any>) => posts.map(this.setEmbeddedFeaturedImage))
        );
    

    fetchPost(post_id: string) 
      return this.http
        .get(`$this.baseURL/wp-json/wp/v2/posts/$post_id?_embed`)
        .pipe(map((post: any) => this.setEmbeddedFeaturedImage(post)));
    

    /**
     * Makes the featured image parameter easily accessible in a template
     */
    private setEmbeddedFeaturedImage(p) 
      return Object.assign(, p, 
        featured_image: get(p, "_embedded['wp:featuredmedia'][0].source_url")
      );
    

    fetchPostCategories() 
      return this.http.get(`$this.baseURL/wp-json/wp/v2/categories`);
    

    fetchPostsByCategory(category_id: string) 
      return this.http
        .get(
          `$this.baseURL/wp-json/wp/v2/posts?_embed&categories=$category_id`
        )
        .pipe(
          map((posts: Array<any>) => posts.map(this.setEmbeddedFeaturedImage))
        );
  
  

在帖子视图中加载的所有内容都没有发布图片，但图片网址在浏览器中打开 //主视图：

   <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>
        title
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
      <ion-card class="welcome-card" (click)="loadPost(post)" padding-bottom *ngFor="let post of posts$ | async">
        <img src="post.featured_image" >

        <ion-card-header>
            <ion-card-subtitle>post.title.rendered</ion-card-subtitle>
          <ion-card-title>post.title.rendered</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          <div>
            <div [innerhtml]="post.excerpt.rendered"></div>
          </div>
          <ion-button href="#">مشاهدة المزيد</ion-button>
        </ion-card-content>
      </ion-card>

  </ion-content>

//

【问题讨论】：

您能否详细说明您的问题是什么，包括重现错误的最小代码示例。如果您将代码作为实际代码而不是图像包含在内，也会很有帮助。

【参考方案1】：

目前问题已经成功解决，我从wordpress的“All in one security plugin”生成的防火墙中发现了问题，我目前禁用了该插件 防火墙角色，直到站点的 API 有例外选项。 谢谢

【参考方案2】：

现在，可以使用此插件。 Better Rest API

你应该在文件中使用.html

<ion-img [src]="noticia?.better_featured_image.media_details.sizes.medium.source_url">
</ion-img>

问候