PNG Images will not render in iOS (iPad or iPhone) for apps built in Titanium Appcelerator

Question

ISSUE: PNG's will not render.

I recently restarted work on a Titanium Appcelerator App that had not been touched for 18 months or so.

(I develop on Mac OS X Yosemite 10.10.15)

After jumping through a few hoops i.e. installing latest Appcelerator Studio, latest Titanium SDK 5.1.0v20150929231927, iOS and Android SDK's, updating XCode version, importing the project to a new Workspace (as previous workspace wouldn't recognise the iOS SDK's).

I can now build my app and run it in in the iOS Simulator... however none of the PNG's render (or JPG), and show the "missing image icon" instead. (Even though no app code has changed -- so environment or appcelerator issue).

(see sample code below where I attempt to render some ImageView and Button controls)

The only thing I can do to render an image is to use a GIF. However, this is not a solution as the images we use are not suitable to be converted to GIF due to quality.

I have tried the following none of which allow me to render the PNG:

Moving images to different folders (Images live in /resources/images/) Trying to use different PNG's Created a brand new test project that has the 2 test windows, this even comes with 2 PNG's for menu tab buttons, even they don't render. Attempt to render other images. Only GIF's will show, even the GIF's live in same folder as the PNG's that do not render. Ensure path's and files are referenced with the correct case. This all means my client cannot get a crucial update to their App.

Anybody with a similar issue or resolution as my Mac is ready to be thrown out the window!

Some sample code for a hello world test app can be found in this

Attached is a sample code from a Hello World test app, PNG that I am trying to render and screenshot of the output from the sample code (to show the 2 x gif's showing but none else).

// SAMPLE TEST CODE:

Titanium.UI.setBackgroundColor("#000");
var tabGroup = Titanium.UI.createTabGroup(),
    win1 = Titanium.UI.createWindow({
        title: "Tab 1",
        backgroundColor: "#000"
    }),
    tab1 = Titanium.UI.createTab({
        icon: "KS_nav_views.png",
        title: "Tab 1",
        window: win1
    }),
    label1 = Titanium.UI.createLabel({
        color: "#999",
        text: "I am Window 1",
        font: {
            fontSize: 20,
            fontFamily: "Helvetica Neue"
        },
        textAlign: "center",
        width: "auto"
    }),
    image1 = Titanium.UI.createImageView({
        top: 50,
        left: 50,
        image: "KS_nav_ui.png"
    }),
    image2 = Titanium.UI.createImageView({
        top: 100,
        left: 50,
        image: "/images/iconjpg.jpg"
    }),
    image3 = Titanium.UI.createImageView({
        top: 150,
        left: 50,
        image: "/iphone/iconjpg.jpg"
    }),
    image4 = Titanium.UI.createImageView({
        top: 200,
        left: 50,
        image: "/iconjpg.jpg"
    }),
    image5 = Titanium.UI.createImageView({
        top: 250,
        left: 50,
        image: "/images/btn-meetings.gif"
    }),
    image6 = Titanium.UI.createImageView({
        top: 300,
        left: 50,
        image: "/images/btn-meetings.png"
    }),
    testButton = Ti.UI.createButton({
        backgroundImage: "/images/btn-meetings.png",
        height: 76,
        width: 150,
        top: 350,
        left: 50
    }),
    testButton2 = Ti.UI.createButton({
        backgroundImage: "/images/icongif.gif",
        height: 76,
        width: 150,
        top: 400,
        left: 50
    });

	win1.add(image1), win1.add(image2), win1.add(image3), win1.add(image4), win1.add(image5), win1.add(image6), win1.add(testButton), win1.add(testButton2), win1.add(label1);

	var win2 = Titanium.UI.createWindow({
        title: "Tab 2",
        backgroundColor: "#fff"
    }),
    tab2 = Titanium.UI.createTab({
        icon: "KS_nav_ui.png",
        title: "Tab 2",
        window: win2
    }),
    label2 = Titanium.UI.createLabel({
        color: "#999",
        text: "I am Window 2",
        font: {
            fontSize: 20,
            fontFamily: "Helvetica Neue"
        },
        textAlign: "center",
        width: "auto"
    });

	win2.add(label2), tabGroup.addTab(tab1), tabGroup.addTab(tab2), tabGroup.open(),
		function() {
			var e = require("ti.cloud"),
				i = "production" === Ti.App.deployType.toLowerCase() ? "production" : "development",
				t = Ti.App.Properties.getString("acs-username-" + i),
				a = Ti.App.Properties.getString("acs-password-" + i);
			i && t && a && e.Users.login({
				login: t,
				password: a
			}, function(e) {
				"development" === i && (Ti.API.info("ACS Login Results for environment `" + i + "`:"), Ti.API.info(e)), e && e.success && e.users && e.users.length ? Ti.App.fireEvent("login.success", e.users[0], i) : Ti.App.fireEvent("login.failed", e, i)
			})
		}();

Sample png that will not render in app

Rendered output from sample code snippet, images shown are only the gifs, jpg and pngs are rendering with the missing icon

David, do you have the enable-app-thinning tag in your tiapp.xml and set to true? I was thinking maybe because you don't have the images in the /images folder but the road it might not find them when it uses asset catalogs? — Fokke Zandbergen
Fokke, thanks for the info. I have reviewed the 'tiapp.xml' in my existing project as well as the new sample project but neither have the 'enable-app-thinning' property. I've added it via the XML to try but breaks the build, could you share a 'tiapp.xml' that you have that uses it? What SDK are you using? — David Boyd
Fokke, ignore previous commment.... I've found the syntax for this config: https://wiki.appcelerator.org/display/guides2/App+Thinning i.e....<use-app-thinning>true</use-app-thinning>.. but makes no difference, png's still not rendering. — David Boyd

Fokke Zandbergen Fokke Zandbergen · Accepted Answer · 2015-11-30T08:07:22

I just ran the following using 5.1.1.GA with your image..

var win = Ti.UI.createWindow({
    backgroundColor: 'white'
});

win.add(Ti.UI.createImageView({
    image: '/images/Jldsg.png'
}));

win.open();

And that worked fine for me:

I have no idea why it wouldn't for you other than there's a lot of linting errors in your code:

JSLint was unable to finish.

line 68 column 17

Expected ';' and instead saw ','. win1.add(image1), win1.add(image2), win1.add(image3), win1.add(image4), win1.add(image5), win1.add(image6), win1.add(testButton), win1.add(testButton2), win1.add(label1);

line 68 column 17

Unexpected ','. win1.add(image1), win1.add(image2), win1.add(image3), win1.add(image4), win1.add(image5), win1.add(image6), win1.add(testButton), win1.add(testButton2), win1.add(label1);

PNG Images will not render in iOS (iPad or iPhone) for apps built in Titanium Appcelerator

3 Answers