0

В моем компоненте выводятся посты из вордпресса по rest api. Но вот не получается вывести изображение записи (thumbnails). Как это лучше сделать?

import Img from './Img';
import { Link } from 'react-router';
const BLOG_API = `http://localhost/test-digital/`;

class Posts extends Component {
    constructor(props) {
        super(props)

        this.state = { // инициализируем состояние по-умолчанию
          posts: []
        };
 
      }

      componentWillMount () {
        return fetch(BLOG_API + '/wp-json/wp/v2/posts?per_page=4' ) // делаем запрос к Wordpress API и получаем только первые четыре записи
        .then((response) => response.json()) // получаем ответ в формате json
        .then(posts => {
          this.setState({
            posts: posts, // обновляем состояние страницы
          })
        })
      }

      render() {
        return (
          <div>
            <ul> 
              {
                this.state.posts.map(item => (
                  <li key={item.id}>
                    <Link to={`/test-digital/${item.id}`}>
                        <Img/>
                        <p>{item.title.rendered}</p>
                        <div dangerouslySetInnerHTML={{ __html : item.excerpt.rendered }}></div>
                        <p>{item.date}</p>
                    </Link>                    
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
    }

export default Posts

1 ответ 1

1

Получаете ID - изображения в post.featured_media

И получаете данные картинки из API: /wp-json/wp/v2/media/{ID}. Дальше разберетесь.

3
  • Это получается мне нужен еще плюс целый компонент что бы просто отрендерить картинку и передать ее родителю?( 17 июн 2020 в 9:22
  • Наверное нужен)
    – user243545
    17 июн 2020 в 9:52
  • Примерно логику понял, но вот у меня не выходит отрендерить конкретную картинку к конкретной записи. Сейчас выводятся все картинки к каждому посту.. (код выше добавил) 17 июн 2020 в 10:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.