How to get img from API (React/TypeScript)?-CodePudding

Problem is that i see only icon while file doesn't upload. Thanks in advance for your help.

       import React, { FC } from "react";
       import { IUser } from "../types/Types";
       import App from "../App";
       interface UserItemProps {
        user: IUser;
       }
      const UserItem: FC<UserItemProps> = ({ user }) => {
       return (
        <body>
         <article className="UserPage">
           <h2 className="Title_options ">
           {user.title} <h6 className="Name">{user.name}</h6>
           <h6>{user.address}</h6>
           </h2>
           <img src={user.pictures} />
          </article>
         </body>
        );
       };

       export default UserItem;

Types

   export interface IUser {
        name: string;
        title: string;
        headers: string;
        id: number;
        email: string;
        address: string | number;
        pictures: string;
     }

[API][1]

   [1]: https://i.stack.imgur.com/9uISi.png

[How it looks in Chrome][2]

   [2]: https://i.stack.imgur.com/wBaZ8.png

CodePudding user response：

Replace this:

<img src={user.pictures} />

with this:

{user.pictures && user.pictures.map(picture => (<img src={picture} />)}