Как из JSONPlaceholder вывести картинки?

Question

Нужно вывести изображения из https://jsonplaceholder.typicode.com/photos. Пока что могу только отобразить ссылки на изображения, но нужно отобразить сами изображения. Подскажите как можно это сделать. Извиняюсь за такой простой вопрос, я новичок) (Пишу на React)

import React, { useEffect, useState } from 'react'
import axios from 'axios'  

function Photos() {
    const [clients, setClients] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios.get (
                "https://jsonplaceholder.typicode.com/photos"
            );

            setClients(result.data);
        };

        fetchData();
    }, []);
    console.log(clients);
        return (
          <div className='container'> 
              <div className='photos-cards'>
                            {clients && 
                                clients.map(client => (
                                    <div className='photos-card'>
                                        <p>{client.thumbnailUrl}</p>
                                    </div>
                            ))}
              </div>
          </div>
  )
}


export {Photos}

Answer 1

Mapом генерируйте тег img и в атрибут src добавляйте значение поля thumbnailUrl

{clients && clients.map(client => (
  <div className='photos-card'>
      <p>{client.title}</p>
      <img src={client.thumbnailUrl} alt={client.title} />
  </div>
))}

БЛОГ НА HUSL

Как из JSONPlaceholder вывести картинки?

Ответы (1 шт):