Setting parent of an Image while populating inventory from code - unity3d

Question

I am developing an inventory system for my game. I have the UI set up, I have this:
As you can see, I have a Bag Panel, inside it there are a number of slots, that are the slots you can see in the right part of the image.
I am populating it this way:
inventoryPanel.SetActive(true);
GameObject bagObject= GameObject.Find("Bag");
List<GameObject> childrens = new List<GameObject>();
Transform[] listSlots = bagObject.GetComponentsInChildren<Transform>();
foreach(Transform child in listSlots)
{
if(!child.gameObject.name.Equals(bagObject.name))
childrens.Add(child.gameObject);
}
for (int i = 0; i < character.ItemsInInventory.Count; i++)
{
if (character.ItemsInInventory[i] != -1)
{
GameObject slot = childrens[i];
print("Slot: " + slot.name);
Image imagen = childrens[i].GetComponent<Image>();
string ruta = GetRutaSprite(character.ItemsInInventory[i]);
Sprite icono = Resources.Load<Sprite>(ruta);
imagen.name = "Item";
imagen.sprite = icono;
print("parent is " + slot.name);
imagen.transform.SetParent(slot.transform);
}
}
When I run this, I got this:
As you can see, Slot0 has dissapeared, and it is being substituted by item. What I would like to achieve is Item be a son of Slot0. I dont know why it happens this way, since I am setting the image's parent to the slot. In the print("Slot: " + slot.name); line it prints "Slot0", but in print("parent is " + slot.name); line it prints Item. Why is that? Also, the sword looks like it is behind something...it is not displayed correctly. I would like to show the icon AND the slot border.
How can I populate my inventory properly?

Answer 1

In your code, you just found the slot, get an image (which is border), and replace sprite on it with your items sprite.
You need to instantiate new image instead. It can be a prefab, or you can use your border image to create a copy from it (do not forget to change color). Or, if you have a separate Image inside slot, and you want to set the sprite for it, you need to get reference on it, but not on border. For this, you need a script on your slot, holding that reference.
for make a minimal changes in your code, you can do like this:
Sprite icono = Resources.Load<Sprite>(ruta);
Image newImage = Instantiate(imagen, slot.transform);
newImage .name = "Item";
newImage .sprite = icono;
print("parent is " + slot.name);
newImage.transform.SetParent(slot.transform);
But I defenitely recommend to rework it: at least, add a script on your slot, holding a reference to your second Image (which is not border).