离子未加载来自url wp-json和ionic4的图像

问题描述 投票:-1回答:1

当我将带有wordpress博客的离子应用程序与wp-json连接所有内容而没有图像时,我使用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个回答
0
投票

此问题已成功解决,我发现wordpress的“All in one安全插件”生成的防火墙问题,我目前已禁用插件防火墙角色,直到该网站的API有一个例外选项。谢谢

© www.soinside.com 2019 - 2024. All rights reserved.