Show multiple images downloaded from a server

Question

I want to download multiple images I've uploaded to a server and show in my scene in a gallery or in a slideshow. I've done the code below to download the images but I only get to show one image. How can I do to show multiple images downloaded from the server?

public void DownloadtheFiles()
    {

    List <string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++) {

        new GetUploadedRequest()

            .SetUploadId(photolist[i])
            .Send((response) =>
                {
                    StartCoroutine(DownloadImages(response.Url));
                } );
    }
    }

    public IEnumerator DownloadImages(string downloadUrl)
    {
        var www = new WWW(downloadUrl);
        yield return www;
        downloadedImages = new Texture2D(200, 200);
        www.LoadImageIntoTexture(downloadedImages);
        imageLoaded.texture = downloadedImages as Texture;
    }

UPDATE 1: with the code bellow I show how I'd like to show them but it get the images from a folder path and I need to show the images I download from the server. How can I integrate this code to make the slideshow with the downloaded images?

public class ImageLoader : MonoBehaviour
{
[SerializeField]
[Tooltip("The folder where images will be loaded from")]
private string imagePath;

[SerializeField]
[Tooltip("The panel where new images will be added as children")]
private RectTransform content;

private List<Texture2D> textures;

private void Start()
{
    Application.runInBackground = true;
    StartCoroutine(LoadImages());
}

public IEnumerator LoadImages()
{
    textures = new List<Texture2D>();

    DirectoryInfo di = new DirectoryInfo(imagePath);
    var files = di.GetFiles("*.png");

    foreach (var file in files)
    {
        Debug.Log(file.FullName);
        yield return LoadTextureAsync(file.FullName, AddLoadedTextureToCollection);
    }

    CreateImages();
}

private void AddLoadedTextureToCollection(Texture2D texture)
{
    textures.Add(texture);
}

private void CreateImages()
{
    foreach(var texture in textures)
    {
        GameObject imageObject = new GameObject("Image");
        imageObject.transform.SetParent(content);
        imageObject.AddComponent<Image>().sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
    }
}

public IEnumerator LoadTextureAsync(string originalFileName, Action<Texture2D> result)
{
    string fileToLoad = GetCleanFileName(originalFileName);

    Debug.Log("Loading Image from path: " + fileToLoad);

    WWW www = new WWW(fileToLoad);
    yield return www;

    Texture2D loadedTexture = new Texture2D(1, 1);

    www.LoadImageIntoTexture(loadedTexture);

    result(loadedTexture);
}

private static string GetCleanFileName(string originalFileName)
{
    string fileToLoad = originalFileName.Replace('\\', '/');

    if (fileToLoad.StartsWith("http") == false)
    {
        fileToLoad = string.Format("file://{0}", fileToLoad);
    }

    return fileToLoad;
}
}

UPDATE 2: I've created a ScrollView and HorizonatalLayoutGroup and I've applied the ImageLoader.cs of the UPDATE 1. I've added 4 images in the folder and these are a screenshots of the hierarchy and the result:

It works fine as a test, but the source of the images is a folder in my pc and I want to download the images of a server. How can I do it?

Answer 1

You have don all the required parts done by using ScrollView and HorizonatalLayoutGroup. Notice that I asked you to use the RawImage component but it seems like you are using the Image component. I recommended RawImage because lets you to avoid the use of Sprite.Create which is expensive. You can still use Image if you want.

The only thing you have to do now is to resize the RawImage until you are satisfied with its size. Create one prefab from that RawImage. Delete the Image/RawImage under the Content GameObject. You don't need them any longer.

Now, download your images from the server, instantiate a prefab from that RawImage prefab. Finally, make that RawImage to be the child of the Content GameObject. That's it. The HorizonatalLayoutGroup should automatically position it.

With your original code, below is how to do that. The contentRef variable is a reference to the Content GameObject which is under ScrollView. The imgPrefab variable is a reference to the RawImage prefab. Make sure to assign both from the Editor. Also, notice how I added and used a new int index = i; variable to prevent capturing the i variable and causing it to only download the last image.

public GameObject contentRef;
public RawImage imgPrefab;

void Start()
{
    DownloadtheFiles();
}

public void DownloadtheFiles()
{

    List<string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++)
    {
        //Don't capture i variable
        int index = i;

        new GetUploadedRequest()

            .SetUploadId(photolist[index])
            .Send((response) =>
            {
                StartCoroutine(DownloadImages(response.Url, index));
            });
    }
}


public IEnumerator DownloadImages(string downloadUrl, int index)
{
    var www = new WWW(downloadUrl);
    yield return www;

    //Instantiate the image prefab GameObject and make it a child of the contentRef
    RawImage newImg = Instantiate(imgPrefab, contentRef.transform);
    //Change the name
    newImg.name = "Image-" + index;

    //Get the downloaded image
    Texture2D tex = new Texture2D(4, 4);
    www.LoadImageIntoTexture(tex);

    //Apply the downloaded image
    newImg.texture = tex;
}