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

【问题标题】：ionic not load image from url wp-json and ionic4离子不从 url wp-json 和 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>

【问题讨论】：

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

标签： wordpress image api http-status-code-403 ionic4

【解决方案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>

问候

【讨论】：