ionic 无法从 url wp-json 和 ionic4 加载图像

Question

当我使用 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))
        );
  }
  }

在 post 中查看没有 post 图像但图像 url 在浏览器中打开的所有加载的东西 //主页视图：

   <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>

//

Answer 1

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

Answer 2

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

你应该在文件中使用之后.html

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

此致

ionic 无法从 url wp-json 和 ionic4 加载图像

ionic not load image from url wp-json and ionic4

api

wordpress

image

http-status-code-403

ionic4