<Image> from url showing on Android, but not iOS?

[Caleb_Strong]

So in this chunk of code, it’s displaying my news object correctly on Android. However on iOS, the image is not being displayed. The content is coming from an RSS feed that I parse/edit into Observable objects.

[Caleb_Strong]

				<StackPanel Width="92%" ItemSpacing="10" >
					<Each Items="{nbaNewsList}" ux:Name="nbaNewsList" >
						<Panel HitTestMode="LocalBoundsAndChildren">
							<StackPanel ItemSpacing="10" >
								<Text Value="{title}" FontSize="18" TextWrapping="Wrap" Font="Bold" TextAlignment="Center" >
									<Clicked>
										<LaunchUri Uri="{link}" />
									</Clicked>
								</Text>
								<Image Url="{image}" />
								<Text Value="{description}" TextWrapping="Wrap" />
							</StackPanel>
						</Panel>
						<Separator Margin="0,10,0,0" />
					</Each>
					<Text Value="{info}" Alignment="Center" Margin="10" />
				</StackPanel>

[Enrico]

I don’t see anything wrong in your code. The fact that it works in Android it means that the code is correct.
The problem happens only with images or even with other data such as title or description?

[Caleb_Strong]

Only with the images. I just redownloaded the app again both to my Galaxy S8+, the images load fine. And to my iPhone, and the images do not show. Here is the code that gets the RSS feed and formats it down to be readable

function getNbaNews(){
fetch(‘https://basketball.realgm.com/rss/wiretap/15/0.xml’)
.then(function(response) {
response.text().then(function(text) {
var parser = new marknote.Parser();
var doc = parser.parse(text);
var root = doc.getRootElement();
var channel = root.getChildElements(‘channel’)[0];
for(var i = 0; i < 9; i++) {
var item = channel.getChildElements(‘item’)[i];
var link = (item.getChildElements(‘link’).toString()).replace(/(<([^>]+)>)/ig,"");
var image = ((((((item.getChildElements(‘media:thumbnail’).toString()).split(“media:thumbnail”).join("")).split("").join("")).split("<").join("")).split("/>").join("")).split(“url=”).join("")).split(’"’).join("");
var title = (((item.getChildElements(‘title’).toString()).replace(/(<([^>]+)>)/ig,"")).split("&apos;").join("’")).split("&quot;").join(’"’);
var description = (((((((item.getChildElements(‘description’).toString()).replace(/(<([^>]+)>)/ig,"").split("&lt;p&gt;").join("")).split("&apos;").join("’")).split("&quot;").join(’"’)).split("&lt;/p&gt;").join("\n")).split("&lt;/span&gt;").join("")).split("&lt;span&gt;").join("")).split(’&lt;span class=“Apple-converted-space”&gt;’).join("");
var itemJSON = {
link: link,
image: image,
title: title,
description: description
};
nbaNewsList.add(itemJSON);
info.value = “”;
}
});
})
};

[Enrico]

Try replacing your function with the following. As it was a bit complex I pass it into a Javascript validator and it did’nt fully validate due to some ‘not-strict’ single quotes (instead of ASCII 39) and ‘not-strict’ doubles quotes (instead of ASCII 34). As said, if it works on Android the code is correct. Maybe iOS/XCode Javascript engine is more sensitive than the Javascript Android engine.

function getNbaNews(){
    fetch('https://basketball.realgm.com/rss/wiretap/15/0.xml')
        .then(function(response) {
            response.text()
        .then(function(text) {
                
            var parser = new marknote.Parser();
            var doc = parser.parse(text);
            var root = doc.getRootElement();
            var channel = root.getChildElements('channel')[0];
        
            for(var i = 0; i < 9; i++) {
                var item = channel.getChildElements('item')[i];
                var link = (item.getChildElements('link').toString()).replace(/(<([^>]+)>)/ig,"");
                var image = ((((((item.getChildElements('media:thumbnail').toString()).split("media:thumbnail").join("")).split("").join("")).split("<").join("")).split("/>").join("")).split("url=").join("")).split('"').join("");

                var title = (((item.getChildElements('title').toString()).replace(/(<([^>]+)>)/ig,"")).split("&apos;").join("'")).split("&quot;").join('"');
                var description = (((((((item.getChildElements('description').toString()).replace(/(<([^>]+)>)/ig,"").split("&lt;p&gt;").join("")).split("&apos;").join("'")).split("&quot;").join('"')).split("&lt;/p&gt;").join("\n")).split("&lt;/span&gt;").join("")).split("&lt;span&gt;").join("")).split("&lt;span class='Apple-converted-space'&gt;").join("");

                var itemJSON = {
                    link: link,
                    image: image,
                    title: title,
                    description: description
                };
                
                nbaNewsList.add(itemJSON);
                info.value = "";
            }
        });
    })
};

[Caleb_Strong]

I replaced it with that code, the only difference I see is on title and description, you took the amps; n whatnot from some of the .splits, problem is I need to keep those in, otherwise the text in the articles is a mess. And it doesn’t change the problem that its the image that isn’t loading. On iOS, all the text and title loads fine. just not the image

[Enrico]

Did you tried to use the .json() method instead of the .text() method?

.then(function(response) {
    response.json()
.then(function(json) {

and then verify the data fetched

console.log('response: ' + JSON.stringify(response.json()));

too see if within iOS the image data is correctly downloaded. If it is downloaded the problem is something concerning UX in iOS. (Or at least read the response console.log(response.text()) ad see if image is correct).

[Caleb_Strong]

.json() doesnt return anything. Since it’s an RSS feed, I don’t believe it comes down as a json.

[Caleb_Strong]

Also I just found out, on initial user registration, for some reason only on iOS, the placeholder image also isn’t showing up. If they click on the blank space where image is supposed to be, it still allows them to open their camera roll, and select an image. And THAT image shows up just fine. As well as on their profile page it shows up fine. So, maybe it’s an issue with the filetypes not being accepted on iOS or something? Heres the code for that.

Javascript:

var imagePath = Observable(“Assets/profilePlaceholder.png”);

UX:

<Circle Width=“100” Height=“100” Clicked="{imageClicked}" >

<ImageFill File="{imagePath}" StretchMode=“UniformToFill” />

</Circle>

[aeq]

The placeholder image sounds like its not bundled.

[aeq]

Have you tried ImageFill for your RSS feeds image?

[aeq]

And why didn’t you place your JS sample in code? Its difficult to quickly reconstruct to help you.

[aeq]

…for instance, what is marknote? You need to give us a small testable app.

[aeq]

…like this!

So this worked fine for me on iOS, my guess is that its your XML parsing or possibly project/app setup:

<App>
	<JavaScript>

		var Observable = require('FuseJS/Observable');
		var nbaNewsList = Observable();

		function getNbaNews() {
			console.log('fetching...');
			var itemJSON = {
				link: "https://basketball.realgm.com/wiretap/253173/Wizards-Looking-At-Nuggets-Tim-Connelly-To-Replace-Ernie-Grunfeld",
				image: "https://basketball.realgm.com/images/nba/4.2/wiretap/photos/2006/Connelly_Tim_den_150901.jpg",
				title: "Wizards Looking At Nuggets' Tim Connelly To Replace Ernie Grunfeld",
				description: "The Washington Wizards are looking to hire Tim Connelly from the Denver Nuggets to replace Ernie Grunfeld as the president of basketball operations."
			}; 
			nbaNewsList.add(itemJSON); 
				itemJSON = {
				link: "https://basketball.realgm.com/wiretap/253171/Wizards-Fire-Ernie-Grunfeld",
				image: "https://basketball.realgm.com/images/nba/4.2/wiretap/photos/2006/Grunfeld_Ernie_was_160627.jpg",
				title: "Wizards Fire Ernie Grunfeld",
				description: "The Washington Wizards have fired Ernie Grunfeld as team president."
			}; 
			nbaNewsList.add(itemJSON); 
				itemJSON = {
				link: "https://basketball.realgm.com/wiretap/253163/Nets-To-Extend-Kenny-Atkinson-Coaching-Staff",
				image: "https://basketball.realgm.com/images/nba/4.2/wiretap/photos/2006/Atkinson_Kenny_bkn_160418.jpg",
				title: "Nets To Extend Kenny Atkinson, Coaching Staff",
				description: "The Brooklyn Nets are close to completing an extension for Kenny Atkinson and his assistant coaches."
			}; 
			nbaNewsList.add(itemJSON); 
			console.log('fetched.');
		}

		getNbaNews();

		module.exports = {
			nbaNewsList
		};

	</JavaScript>
	<ScrollView>
		<StackPanel Width="92%" ItemSpacing="10" >
			<Each Items="{nbaNewsList}" ux:Name="nbaNewsList" >
				<Panel HitTestMode="LocalBoundsAndChildren" Margin="0,0,0,20">
					<StackPanel ItemSpacing="10" >
						<Text Value="{title}" FontSize="18" TextWrapping="Wrap" Font="Bold" TextAlignment="Center" >
							<Clicked>
								<Text Value="{link}" TextWrapping="Wrap" />
							</Clicked>
						</Text>
						<Image Url="{image}" />
						<Text Value="{image}" TextWrapping="Wrap" />
						<Text Value="{description}" TextWrapping="Wrap" />
					</StackPanel>
				</Panel>
			</Each>
			<Text Value="{info}" Alignment="Center" Margin="10" />
		</StackPanel>
	</ScrollView>
</App>

[Caleb_Strong]

This talks about Marknote and how it is used for Fusetools

Convert XML items into a list?

Hi! We have not bundled FuseJS with any default XML parser, but I have created an example project with you code where I use a third party XML parser <JavaScript File="Marknote/marknote.js" ux:Global="Marknote" /> <JavaScript> var Observable = require("FuseJS/Observable"); var marknote = require("Marknote"); fetch('http://iphone.gronsvartgbg.se/GAiS-v1.3.2/RssTable.ashx') .then(function (response) { response.text().then(function(text) { …

And here is most of my .unoproject file, is something missing?

{
“RootNamespace”:“”,
“Packages”: [
“Fuse”,
“FuseJS”,
“Fuse.BasicTheme”,
“Fuse.CameraRoll”,
“Fuse.Launcher”,
“Uno.Permissions”
],
“Projects”: [
“./src/Firebase/Firebase.unoproj”,
“./src/Firebase.Authentication/Firebase.Authentication.unoproj”,
“./src/Firebase.Authentication.Email/Firebase.Authentication.Email.unoproj”,
“./src/Firebase.Authentication.Google/Firebase.Authentication.Google.unoproj”,
“./src/Firebase.Authentication.Facebook/Firebase.Authentication.Facebook.unoproj”
],

“Google”: {
“RequestID”: “"
},
/
“Facebook”: {
“AppID”: “SUPER_LEGIT_APPID”,
“DisplayName”: “authexample”
},
/
“iOS”: {
“PList”: {
“UriSchemes”: [
"”
]
},
“Mobile”: {
//“UriScheme”: “fb@(Project.Facebook.AppID)”,
“Orientations”: “Portrait”
},
},
“Includes”: [
“",
"Modules/.js:Bundle”,
“GoogleService-Info.plist:ObjCSource:iOS”,
“Assets/.jpg:Bundle",
"Assets/.png:Bundle”,
“Marknote/*.js:Bundle”,
],

“Icon”: “Assets/icon.png”,

"Android": {
"SDK": {
		"BuildToolsVersion": "26.0.0",
		"CompileVersion": 26,
		"MinVersion": 19,
		"TargetVersion": 26
	},
"Icons":{
        "LDPI": "$(Icon)",
        "MDPI": "$(Icon)",
        "HDPI": "$(Icon)",
        "XHDPI": "$(Icon)",
        "XXHDPI": "$(Icon)",
        "XXXHDPI": "$(Icon)"
   },  
	"Package": "***",
	"VersionCode": 106,
	"VersionName": "1.0.6",
	"Key": {
		"Alias": "***",
		"AliasPassword": "***",
		"Store": "***",
		"StorePassword": "***"
	},
}

}

[Caleb_Strong]

How do you format it so that the code shows up as code? I haven’t noticed how to do it consistently

[Enrico]

Add 4 whitespaces (or multiple of 4 for indentation) at the beginning of each line you want to be shown as code.

[aeq]

Use ` 3 times in a row for start of code block, and another 3 times to close the code block.

[aeq]

I’m thinking its easier for you to share a zip of a small version of your test app.

[aeq]

Does my sample app work on your iPhone?