Steps to Reproduce
Starting from the default alloy project, simply copy the
appicon.png under
app/assets/images/alloy.png and notice an inconsistency in the handling of leading '/' of ImageView
Test case
*index.xml*
<Alloy>
<Window id="win" backgroundColor="white">
<TableView id="table">
<TableViewSection headerTitle="Image">
<TableViewRow>
<Label text="Leading /" />
<ImageView image="/images/alloy.png" />
</TableViewRow>
<TableViewRow>
<Label text="No leading /" />
<ImageView image="images/alloy.png" />
</TableViewRow>
</TableViewSection>
<TableViewSection headerTitle="BackgroundImage">
<TableViewRow>
<Label text="Leading /" />
<ImageView backgroundImage="/images/alloy.png" />
</TableViewRow>
<TableViewRow>
<Label text="No leading /" />
<ImageView backgroundImage="images/alloy.png" />
</TableViewRow>
</TableViewSection>
<TableViewSection headerTitle="Image from code">
<TableViewRow>
<Label text="Leading /" />
<ImageView id="image1" />
</TableViewRow>
<TableViewRow>
<Label text="No leading /" />
<ImageView id="image2" />
</TableViewRow>
</TableViewSection>
<TableViewSection headerTitle="BackgroundImage from code">
<TableViewRow>
<Label text="Leading /" />
<ImageView id="image3" />
</TableViewRow>
<TableViewRow>
<Label text="No leading /" />
<ImageView id="image4" />
</TableViewRow>
</TableViewSection>
</TableView>
</Window>
</Alloy>
*index.tss*
"TableViewRow":
{
layout: "horizontal",
height: Ti.UI.SIZE
},
"ImageView":
{
height : "128px",
width: "128px"
}
*index.js*
$.image1.setImage('/images/alloy.png');
$.image2.setImage('images/alloy.png');
$.image3.setBackgroundImage('/images/alloy.png');
$.image4.setBackgroundImage('images/alloy.png');
$.win.open();
Actual Result
*iOS Simulator:*
Imageviews work both with and without leading '/' wether it’s for the image property to the Imageview Property
*Android:*
ImageViews don’t work without leading '/'.
*Mobileweb deployed in root folder of server (e.g.www.site.com/index.html):*
Imageviews work both with and without leading '/' wether it’s for the image property to the Imageview Property
*Mobileweb deployed elsewhere than the root (e.g. www.site.com/test/index.html):*
Imageviews don’t work with leading '/' for the image property.
Imageviews work both with and without leading '/' for the backgroundImage property
Expected Result
The bare minimum would be for Imageviews to work as expected with the leading '/' for the *image* property wherever the mobile web app is deployed (absolute paths should be considered relative to root of the app). It's already done properly for the *backgroundImage* property, clearly showing it's a bug for the *image* property.
Additionally, all platforms should work the same, inconsistencies create the unnecessary need for customized code/files per platform.
Moving this ticket to engineering as I can reproduce this issue on Android with the provided test case. Same test works on iOS as expected.
There are 2 separate issues here:
Android and iOS handle relative file paths differently. On Android, paths are relative to the JS file. On iOS, paths are always relative to the app's "Resources" directory (ie: the working directory). We've written up this parity different in [TIMOB-23809].
Android does have a bug where it always fails to load images if the path does not have a leading slash. This is a bug with how it constructs paths. See [TIMOB-13642]. The
For now, I recommend that you stick to absolute paths with leading slashes. This is the most portable solution.Ti.Filesystem.getFile()API does not have this problem.