Loading Sprites image from URL by JavaScript

Hi , we are working on a project that we create several images dynamically and we need to set each sprite's image differently each time from different URL here is an example:

imagine we have a search that shows some users from server, each user has a name and profile picture so we just load a JSON file from server and after than we go though a code like this to display each user's profile picture:

	let profiles=[
		{
			id:1,
			name:'name1',
			url:'something1.com',
		},
		{
			id:2,
			name:'name2',
			url:'something2.com',
		},
		{
			id:3,
			name:'name3',
			url:'something3.com',
		},
	]

profiles.forEach((active, index) => {
		
		let box=runtime.objects.profilePicture.createInstance("Main",310,300+(index*400) ,true)
//so now we have the box how can we access the box's image so we can load it from active.url?

Is it not much simpler if you use AJAX and JSON?

Load the server's response to the C3's JSON object.

You can load the image in a sprite from the JSON object.

thank you for your response actually i wrote that JSON as an example (we get the jason with ajax/api from server) that is not the problem . the problem is (based on the example above) the server send us 3 matches profiles for our search . so we create 3 sprites and now we want each of them have different images that assigned to specific urls.

if its possible to send the image with json i have no idea can you guide me more plz or give me a code example?

thank you very much :)

Is this what you are looking for?

https://drive.google.com/file/d/1Q4DKBJr8g4UqpM1PEC-50SoThtvmwpMV/view?usp=sharing

construct23.ideas.aha.io/ideas/C23-I-87

Thank you very much it is working perfectly and its exactly what we wanted 😇😇🙏🙏

just one more thing i just test it and i realized when i change the other picture all of previous ones are turning into the the new image is there a fix for this ?

runtime.objects.ProfilePictureBG.createInstance("Layer 0",1000,700 ,true);
let response = await fetch("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJk_YS8nz1ueY4iGXhYfb3Qf1j6XzX8sODgX8vqzOjiQ&s");
let blob = await response.blob();
await runtime.objects.ProfilePictureBG.getAllInstances()[0].replaceCurrentAnimationFrame(blob);
runtime.objects.ProfilePictureBG.createInstance("Layer 0",500,500 ,true);
let response = await fetch("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBn-NIAXixBAX5w0tnYCvNG6iljzn2LiC1c1GSqZ4QtA&s");
let blob = await response.blob();
await 
runtime.objects.ProfilePictureBG.getAllInstances()[1].replaceCurrentAnimationFrame(blob);

That's how it's always worked - Sprites all share the same source set of textures.

so how can we dynamically create sprites with different/changing images with JS?

Here's a fix on How we did it cause it seems there is no other way to change sprites of an object dynamically:

for example we have several profile pictures (like 100) and we want to set them dynamically based on how many results found. all you need to do is set a max amount for your skins (100) and create empty frames for your sprite.then load the sprite image from URL and assign it to different frames, then address the frames in order to show them.

hope it helps causes it almost took like 10 days to solve this issue hope it saves some time for you too.

take care:)