PNG and JPG images that exist locally (in the Resources dir) render as broken images in Titanium.UI.WebView components. Images are broken when displayed via both
![]()
tags and CSS. This is a regression in Ti SDK 5.5.x. Attached is a sample app.js to reproduce the issue. The console displays the following error:
[ERROR] : Error loading /Users/slim/Library/Developer/CoreSimulator/Devices/F2DACFF8-2866-4B5A-8098-3D817716D753/data/Containers/Bundle/Application/58D9B4CD-13B4-4224-A694-8CD011FED83B/Test.app/KS_nav_ui.png
Note that remote images (PNG, JPG) seem to render correctly. Also, local GIF images (not tested extensively) and other common assets such as JS and CSS render. Only local PNG and JPG images seem to be affected.
Hey there! When was the last time it works? So from from version did it break? Thx!
I just tested with both master and 5.5.x, it does work for me, both on Simulator and device. If you navigate to the file in the logs, what is inside the .app file?
Resolving as
Cannot Reproducefor now. I've done multiple tests across our SDK's and am able to see the demo-image in all test-cases.I was able to reproduce the issue with our packaged SDK. The issue does occur when app-thinning is enabled (
<use-app-thinning>true</use-app-thinning>). It works with setting it tofalse. But since it'strueby default, we need to fix it asap. Technically, it happens because we hash the image-names internally for all SDK-related usages. So we need to come up with a solution for webviews. [~cbarber] thoughts? We have the same problem for local images in Hyperloop. Is there no chance to store the assets with their actual name? I know we had problems with the density-suffixes then, but hashing it has some bad side-effects as well. Thx!Hans, good catch. I can confirm the issue is caused by
The workaround is to disable it.We have to SHA the filenames of all asset catalog images because the filenames are not unique. If you have an image called
foo.jpgin one asset catalog andfoo.jpgin another, they will collide and only one of them will be resolved. Furthermore, there wasn't a way to hint as to which asset catalog to look for a given image. So, we must SHA the filenames. Since you cannot load an image from an asset catalog into the WebView, we have 3 options:Build a generic mechanism to classify and assign metadata to resources. The developer would manually classify which images should not be thinned.
Rewrite all local image requests to a special URI that resolves a proxy run by the app itself that in turn fetches the image from the asset catalog.
Do nothing!
Option 1 will happen, just not in time for Titanium SDK 6.0. Option 2 is a hack. It probably won't take long to implement, but first we need to prove it's possible. I could see us possibly using this proxy mechanism to access other resources such as encrypted JS files. Option 3 is the path of least resistance. Just tell people to turn off app thinning, or at least until we finish option 1.Chris, from my testing it seems that .gif images are not affected by app thinning. They remain in their original location within the Resources dir and are not moved and/or hashed into Assets.car. If this is the case, another workaround/hack would be to only use .gif images in WebViews. Is this safe to do? If app thinning only touches certain image types/extensions, can you clarify which? Much appreciated.
[~slim.mckins] Ah, yes. You can safely use .gif images. Titanium will only put .png and .jpg images into image sets: https://github.com/appcelerator/titanium_mobile/blob/master/iphone/cli/commands/_build.js#L4508-L4526. While image sets support .png, .jpg, and .pdf files (https://developer.apple.com/library/content/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format/ImageSetType.html), we chose to not automatically put .pdf files in image sets. .png and .jpg are always images, but .pdf files may be documents. So using .gif files is another workaround.
hi, any update on this? thanks!
I can confirm that the issue is present in 5.5.1GA. Changing the setting to false in tiapp.xml does fix it:
This will be resolved in a future release as part of the general app-thinning changes being made. Until now, the workaround is to disable app-thinning for those use-cases.
[~hknoechel], I have tested with the Ti SDK 7.0.1.GA and iPhone 5s v11.2.2 but it does not work with this workaround.
<Alloy> <Window id="win"> <WebView id="webview" backgroundImage="motiur.jpg" url="/html/motiur.html"></WebView> </Window> </Alloy>[~morahman] Where exactly did you put the
<use-app-thinning>flag?[~hknoechel], I added it inside the
<ios> <enable-launch-screen-storyboard>true</enable-launch-screen-storyboard> <use-app-thinning>false</use-app-thinning> <plist> <dict> <key>UISupportedInterfaceOrientations~iphone</key> <array> <string>UIInterfaceOrientationPortrait</string> </array> <key>UISupportedInterfaceOrientations~ipad</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array> <key>UIRequiresPersistentWiFi</key> <false/> <key>UIPrerenderedIcon</key> <false/> <key>UIStatusBarHidden</key> <false/> <key>UIStatusBarStyle</key> <string>UIStatusBarStyleDefault</string> </dict> </plist> </ios>Update: We have discussed this internally and came to the conclusion that it is currently not possible to reference images from the asset catalog in local web views, which is an iOS limitation in general. There are plans to have whitelisted files and/or directories, but that has not been scoped so far. Any contributions to do so are welcome!