Adding base64 string to array list in foreach loop takes long time in azure server to return respons-CodePudding

I have a full stack application where the front end app uses angular and back end application uses .Net Core 5 web api.

The application works fine in a local environment and the api returns a response in microseconds, but in production the api takes 7 to 10 minutes to respond. The data pulled from the database is not large; only 400 clients are pulled from the database.

After investigating the problem I discovered a base64 string is formulated by converting bytes from an array image. Adding the converted string into array list causes the api to pull data very slow from the server.

Below are some of the code implementation.

My Interface Class

{
    List<ClientsList> GetClientsList();
}

My Service Class

public List<ClientsList> GetClientsList()`
{
    var clients = _dbBconnection.employees.Include(x => x.Department).Include(y => y.EmployeeJobTitle);
    if (clients != null)
    {
        List<ClientsList> clientsLists= new List<ClientsList>();
        foreach (var data in clients )
        {
            var folderName = Path.Combine("Resources", "Images");
            var filePath = folderName   '\\'   data.PassportSize;
            var byteArrImg = File.ReadAllBytes(filePath);
            var base64Img = Convert.ToBase64String(byteArrImg);

            var employeeData = new ClientsList()
            {
                ClientId = data.ClientId,
                Fname = data.Fname,
                Mname = data.Mname,
                Lname = data.Lname,
                Dob = data.Dob,
                Gender = data.Gender,
                PhoneNo = data.PhoneNo,
                ImageData = base64Img
            };
            clientsLists.Add(employeeData);
        }
        return clientsLists;
    }
    else
    { return null; }
}

My Controller Class

[HttpGet()]public List<ClientsList> GetClientsList()
{
    return ClientsManagerInterface.GetClientsList();
}

Should I minimize the base64 string? Or what else should I do?

When the string is short — for instance when base64Image = "jejrhwejrhehrjehrhwejrhwejrwerhwjerhwejrhwje" — the api pulls data within a few microseconds. The problem comes when the string is larger.

I tried to minimize the string by hard cording, and it works, but the conversion of a byte array image results in a large base64 string and the problem occurs.

CodePudding user response：

Don't return full image data to the client as part of this API call! No wonder it's slow, if you're trying to return a few hundred images in the same response. Depending on the size of each image you could be trying to transfer over a gigabyte of data, all of which must be received before angular can even begin to do anything with it. I feel especially sorry for someone who tries to load that app on a mobile device and data plan.

Instead, return a URL for each image your app can use with the src attribute of an <img /> element.

You might also want to consider paging this data, and only returning one page's worth of data at a time.