Dynamic image is no display

Hi

Fuse version
Fuse version 1.2.1 (build 13974)
Copyright © 2017 Fusetools

I have an image added from camera roll which is not displayed. it is due to not part of the bundle?

<Image Width="100%" Height="100%" Margin="1" Background="#353942" StretchMode="Fill" File="{overlay}">
</Image>

Here is more info how file added

CameraRoll.getImage().then(
  		function(image)
  		{
            overlay.value = imagePath + image.name;
            imagename = image.name;
            FileSystem.move(image.path,overlay.value);
            console.log("received image: "+overlay+", "+image.width+"/"+image.height);  			
        }
        ).catch(
        function(reason){
         console.log("Couldn't get image: "+reason);
     });

Could you please provide a complete, ready-to-run example? There’s not much we can do without seeing what imagePath is, and there might be other problems with the code that you’re simply not showing in the snippet above.

Another thing you might try is setting overlay.value after you’ve moved the file. I believe your UX tries to show the image before it’s there (because your code hasn’t yet moved it), and fails.

Hi

Thanks for replay.

here is full page code.

<test.Page ux:Class="addBannerPage">
	<Router ux:Dependency="router" />
	<JavaScript>
		var Camera          = require("FuseJS/Camera");
		var CameraRoll      = require("FuseJS/CameraRoll");
		var Observable 		= require("FuseJS/Observable");
		var ImageTools      = require("FuseJS/ImageTools");
		var FileSystem      = require("FuseJS/FileSystem");		
		var Storage 		= require("FuseJS/Storage");
		var Context 		= require("Modules/Context");

		var imagename 		= Observable();
		var banner 			= Observable({name: "",	overlay: "Assets/test-test-img-01.jpg",  background: [{ photo:"Assets/test-test-img-01.jpg"}],	lastphoto: "",	location: "", comments: ""});
		var Path       		= FileSystem.dataDirectory + "/Assets/";

		var name 			= banner.map(function(x) { return x.name; });
		var overlay 		= banner.map(function(x) { return x.overlay; });

		function cancel() {
			router.goto("home");
		}

		function save() {
			Context.addBanner(name.value, '', overlay.value,'', '');
			router.goto("home");
		}

		function goToaddBanner(){
			router.goto("addBanner");
		}

		function selectImage()
		{
		  	CameraRoll.getImage()
		  		.then(function(image)
		  			{            
		            imagename.value = image.name;
		            FileSystem.moveSync(image.path,Path + image.name.toLowerCase());
		            overlay.value = Path + image.name.toLowerCase();
		            console.log("received image: "+overlay.value+", "+image.width+"/"+image.height);  			
		        	})
		  		.catch(function(reason){
		        	console.log("Couldn't get image: "+reason);
		     });
		};

		module.exports = {
		       name: 			name,
		       overlay: 		overlay,
		       imagename:  		imagename,
		       selectImage:    	selectImage,
		       goToaddBanner:  	goToaddBanner,
		       cancel: 	    	cancel,
		       save: 		    save
		};
	</JavaScript> 
	<DockPanel>		
		<StackPanel ItemSpacing="0" Padding="10">
			<test.Header Text="ADD NEW OVERLAY (PNG)" ShowAddButton="Hidden" ShowBackButton="Visible" Margin="0, 0, 0, 30" />
			<Rectangle ux:Class="FormSeparator" Height="1" Fill="#fff4" Width="100%" Margin="10, 0, 40, 0" Alignment="CenterLeft" />
			<test.TextBox ux:Name="name" PlaceholderText="NAME" Value="{name}" />
				<!-- <FormSeparator />
				<test.TextBox ux:Name="location" PlaceholderText="LOCATION" Value="{location}" /> -->
				<FormSeparator />
				<Grid Columns="4*,2*" Margin="0, 0, 40, 0">
					<test.TextBox ux:Name="overlay" PlaceholderText="IMAGE" Value="{imagename}" />
					<test.Button Text="ADD IMAGE" Clicked="{selectImage}" Width="120" />
				</Grid>	
				<FormSeparator />		
				<Panel Width="80%" Height="100%" Background="#FFFFFF" Alignment="HorizontalCenter" Margin="0, 0, 0, 0" Padding="0, 0, 0, 0">
					<Image Width="100%" Height="100%" Margin="1" Background="#353942" StretchMode="Fill" File="{overlay}">
					</Image>					
				</Panel>
				<FormSeparator />				
			</StackPanel>
			<Grid ColumnCount="1" Alignment="Bottom" Margin="0, 0, 5, 0">	
				<!-- <test.Button2 Text="CANCEL" Clicked="{cancel}" FontSize="12" />					 -->
				<test.Button Text="SAVE" Clicked="{save}" FontSize="12" Alignment="BottomRight" Width="120" />					
			</Grid>	
		</DockPanel>
	</test.Page>

Alright, so looking at the code it seems you have a confusion about where files live.

When we’re referring to images in UX markup, that physically exist in your project folder tree, those images are added to the app bundle. Same applies when you explicitly bundle some images in your .unoproj, under "Includes", like so: "Assets/*.png:Bundle". Resources from the bundle can be read using FuseJS/Bundle.

Images in CameraRoll live inside the phones’ camera roll. No surprises there, you need to use FuseJS/CameraRoll to read those.

And finally, if you want to operate with random images or other types of files during app run-time, theres FuseJS/FileSystem which works within the FileSystem.dataDirectory path on the target platform.

Needless to say, those 3 paths are completely different, and you should not mix them up. Another point to keep in mind: I don’t think you can move a file from CameraRoll to FileSystem (even if you can, you definitely should not); copy things instead.

Now, with the above in mind, I created this complete, minimal repro that works:

<App>
    <JavaScript>
    var CameraRoll = require("FuseJS/CameraRoll");
    var Observable = require("FuseJS/Observable");
    var FileSystem = require("FuseJS/FileSystem");

    var overlay = Observable("");
    var path = FileSystem.dataDirectory;

    function selectImage() {
        CameraRoll.getImage()
        .then(function(image) {
            var dest = path + "/" + image.name.toLowerCase();
            console.log("image.path: " + image.path);
            console.log("destination: " + dest);
            FileSystem.copy(image.path, dest).then(function() {
                overlay.value = dest;
                console.log("received image: "+overlay.value+", "+image.width+"/"+image.height);
            });
        }).catch(function(reason){
            console.log("Couldn't get image: "+reason);
        });
    };

    module.exports = {
       overlay: overlay,
       selectImage: selectImage
    };
    </JavaScript> 
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <Panel Dock="Top" Height="56" Background="#18f" Clicked="{selectImage}">
            <Text Value="Select Image" Alignment="Center" TextColor="#fff" />
        </Panel>
        <Panel>
            <WhileString Value="{overlay}" Equals="" Invert="true">
                <Image File="{overlay}" StretchMode="UniformToFill" />
            </WhileString>
        </Panel>
    </DockPanel>
</App>

Hi, thanks for the very good explanation. really appreciate

just want to add one thing filesystem not have function call copy.

https://www.fusetools.com/docs/fuse/filesystem/filesystemmodule

Oh, but it does!

There’s a mistake in the docs, and I’ll raise a ticket to fix that.