PNG images will not be taken in iOS (iPad or iPhone) for applications built into Titanium Appcelerator

advertisements

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


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);