Changing multiple UI.Image source image downloaded via WWW class shows last image

Scripting
1

Hi, having problem with changing source images for multiple UI.image components.

I have a news Prefab which contains two UI text components and a UI.Image component.
I do an api call to a server to get the news articles and parse it through simpleJson.
After which I proceeded to create several instances of the prefab.

It all went smoothly for one article. However, When my API returns two or more articles, apparently it just downloads/displays the last image in the images returned by the api.

This is the code I put for filling out the items of the articles:

     foreach (JSONClass article in news.AsArray)
                {
                  
                    Transform item = List.GetChild(article["id"].AsInt - 1);
                    StartCoroutine(getImg(article["Pic"], item));
                    print(article["aPic"]);
                    item.FindChild("Title/Text").GetComponent<Text>().text = article["title"];
                    item.FindChild("short/Text").GetComponent<Text>().text = article["Long description"];
  
                }

getImg:

        IEnumerator getImg(string path, Transform someTransform)
        {
          
            form = new WWWForm();
            form.AddField("path", path);
            Debug.Log(form);
          
            www = new WWW(imgURL, form); 
          
            yield return www;
            print("Downloading");
            if (www.isDone)
            {
                if (www.texture != null)
                {
                  
                    sprit = Sprite.Create(www.texture, new Rect(0, 0, www.texture.width, www.texture.height), Vector2.zero);
                    someTransform.FindChild("picture").GetComponent<Image>().sprite = sprit;
                }
            }
  
        }

Sample result of my api:

    [
        {
            id: 1,
            title: "asdafss",
            Long description: "sdfasdfas",
            aPic: "uploads/Articles/32701.jpg"
        },
        {
            id: 2,
            title: "sdrasr",
            Long_desc: "asd",
            Pic: "uploads/Articles/22164.jpg"
        },
        {
            id: 3,
            title: "sample3",
            Long description: "lorem",
            Pic: "uploads/Articles/99777.jpg"
         }
    ]

As it appears it only loads the last picture for all of the prefabs I instantiated.
I do realize this could be due to the coroutine, or maybe I’m missing something.
Anyone who have done something similar?

I have posted on Unity answers but as I read on the FAQs discussion should be here, just no sure where exactly should I post.

EDIT:
I do a post request to my backend which processes the pic path and returns the image I want

2

To verify which gameobject is actually getting the image payload, in your coroutine that sets the .sprite field, make some debug logging that prints out the name of the gameObject you are on, and perhaps prints the name of the associated resource.

I theorize that you are perhaps setting each subsequent article to every slot in your scene, and hence only the last one prevails. Printing out names might give you some insight into what’s happening.

1 Like
3

great idea. would try it today. Thanks, would post results