Multiple Image Loading error

General
1

I have a ArtistPage.ux in the Pages/ folder and I want to load some images from the Assets/ folder.

ArtistPage.ux:

...
// Panel class used to show Artists Images in feed
<Panel ux:Class="ArtistCard" >
        <FileSource ux:Property="ArtistImageFile" />

	<Panel Width="100%" Height="150" >
		<Image ux:Name="artistImage" File="{ReadProperty ArtistImageFile}"  />
	</Panel>
</Panel>
...
// UX to display feed
<ScrollView Margin="0,0,5,0" >
	<StackPanel>
		<Each Items="{artist_data}">
			<ArtistCard ArtistImageFile="{image}" Margin="5,5,5,5" />
		</Each>
	</StackPanel>
</ScrollView>
...

ArtistPage.js:

...
//  Observable to be exported
var artist_data = Observable();

// Arrays with actual data
// Since this file is in Pages, I go up one folder in order to get to Assets hence '../Assets/logo.jpg'
var artist_image = ["../Assets/logo.jpg",...] 

// Populating observable with data
for( var i = 0; i < artist_image.length; ++i ) {
    artist_data.add( {
        'image' : artist_image[i],
    });
}

module.exports = {
    artist_data, artist_data
}
...

Project file:

"Includes": [
    "*",
    "Assets/*.jpg:Bundle"
  ]

When I run the code, this is the error I get for the images:

ImageSource error: 'BundleFileImageSource-failed-conversion'

Am I accessing the images wrongly or what is happening ?

Thanks in advance.

2

Any help ?

Still waiting.

3

Most likely, the images are corrupted or there is another technical reason why they can’t be read. Note that this might, and probably will, manifest differently on local preview, iOS and Android, since the platforms have different ways to handle supported file formats.

4

Hi there,

When I use only one image, it works i.e using the first image in artist_image array

...
artist_data.add( {
        'image' : artist_image[0],
});
...

Otherwise, it does not load the images. I saw somewhere that the size might interfere too ?

5

What you just wrote tells us exactly one thing: the first image is perfectly fine, and can be shown. One of the others is likely broken. Check them one-by-one!

6

I already checked all the images and used them one by one. None is broken.

7

In that case, please prepare a reliable, complete, minimal reproduction that we could run on our machines. A Fuse project in a .zip would work nicely for that.

8

Provide me with an email to send the .zip to ?

9

Could you just upload it here?

10

It says:
Sorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, gif).

11

Please try again, .zip files should be allowed now.

12

Project.zip (2.3 MB)

There you go

13

Hey.

In ArtistPage.js:

var artist_image = ["../Assets/logo.jpg",...]
// change to this
var artist_image = ["Assets/logo.jpg",...]

My guess, that when images are loaded from UX you need to specify the relative path like ../image.jpg, but images loaded from JavaScript looking for app root. That’s why you need to use an absolute path for resources.

Hope this helps.

14

Will try this then get back to you.

Thanks

15

Hi there,

Any suggestions ? Uldis ?

Thanks

16

Well Brian, did you try what you were going to try? Because on our end changing the paths pretty much solved the problem.

17

Hi there,

I had tried changing the paths but something was still not right. Restarted Fuse and it is all good. Probably the cache or something.

Thanks.