когда я подключаю ионное приложение к блогу 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))
);
}
}
в посте просматривают все, что загружено без пост-изображений, но 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>
//