Click here to Skip to main content
15,513,441 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Can someone share code to retrieve user details along with thumbnail image to be displayed basis the input username. This has to be accomplished using core and react. I am pretty new to this technology, please help.

What I have tried:

in controller:
public Image ourTeam()
    var userDetails = db.users.Where(x=>x.saMAccountName == "someUsername").FirstOrDefault();
    Image image = GetImage(userDetails.CN); //I get image data

    var stream = new System.IO.MemoryStream();

    if (image != null)
        image.Save(stream, ImageFormat.Jpeg);
    return image;

Component code:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface FetchImageDataState {
    imageList: ImageData[];
    loading: boolean;

export class OurTeam extends React.Component<routecomponentprops<{}>, FetchImageDataState> {
    constructor() {
        this.state = { imageList: [], loading: true }; //initialize to default

            .then(response => response.json() as Promise<imagedata[]>)
            .then(data => {
                this.setState({ imageList: data, loading: false });

    public render() {        
        let contents = this.state.loading
            ? <p>Loading...</p>
            : this.renderImageTable(this.state.imageList);
        return <div>

    private renderImageTable(imageList: ImageData[]) {
        return <div>{

export class ImageData {
    CN: string = "";
    byteData: string = "";
Updated 28-May-20 11:40am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900