Images added at runtime not showing

1

I made a simple test project to display an image on a form when it loads, a little broken icon shows. The image is in an images folder in the project. If I load the image at design time, it displays. Attached is the test project. Ideas?
testImages.appstudio.zip (883.9 KB)

2

If you run the project, it shows that house2.jpeg is not found.

Looking at your project, I see it’s in the images folder. However, there is nothing in the project which says to include that folder in the deploy.

In Project Properties, there is an extraFiles property. Add images to that and it works.

(There is an error message about another image in that folder with the rather odd name of JPEG%20CREIGHTON%20MOVE%20LOGO_old. You might want to fix that one.)

3

OK.
Now what about if the image is from a URL - can I load the url into the.,src property of the image control, or an HTMLview.innerHTML? Like this:

(movie.poster_path) {
        let posterUrl = 'https://image.tmdb.org/t/p/w300' + movie.poster_path  // Change size to w300
        console.log('Poster URL:', posterUrl);  // Log the URL for debugging
        imgPoster.src = posterUrl  // Set the image to imgPoster
        HTMLview1.innerHTML="<div><img src='" +  posterUrl + "' /></div>"
4

I can’t try the URL you are using without seeing the full string.

Are there any messages on the Chrome Console?

5

Here is te full URL for this example - comes into the app from an API to a movie site.

[type or paste code here](https://image.tmdb.org/t/p/w300/yh64qw9mgXBvlaWDi7Q9tpUBAvH.jpg)

Cindy

6

I had a simular issue loading an image from a URL, there was a CORS error msg in the console. This fixed it for me, I added the class “feedImg” to my img tag. i.e. <img class="feedImg"> then…

 Const feedPics = document.querySelectorAll(".feedImg");
 feedPics.forEach((ele) => ele.firstChild.setAttribute("crossorigin", "anonymous"));
2 Likes
7

@Pro_Certs - great find! We’ve made crossorigin the default in the next build of AppStudio, so you won’t have to do this anymore.

1 Like
8

Will this solve trying to use a URL in an Image.src control during runtime? Since the image will display the picture from a URL during runtime when the app is deployed to local file or Volt, I suspect it will. Right?

Also, in ‘plain vanilla’ javascript, how would this code look?

 Const feedPics = document.querySelectorAll(".feedImg");
 feedPics.forEach((ele) => ele.firstChild.setAttribute("crossorigin", "anonymous"));

Thanks! Solved a huge problem.

9

I guess some thing like this, (after deviceReady,)

function loadImages() {
  const feedPics = document.querySelectorAll(".feedImg");
  feedPics.forEach((ele) => ele.firstChild.setAttribute("crossorigin", "anonymous"));
}
10

Thanks, in my case I load an RSS Feed (for my Cordova app built with VoltBuilder) which has images, it used to work ok without the above workaround.

When I noticed the images stopped loading it took me ages and a lot of googling to get the images loading again.

11

@cindycc - what happens if you do Deploy to Local Folder instead of Start in Desktop Browser?

12

If it is deployed to Local Folder, it says blocked by CORS.

If it is deployed to the browser, the text from the API call is returned - the image URL is returned also, but it doesn’t work in the HTMLView control. The url returned from the API is correct as shown in the console. If I copy the returned URL and just paste it into a browser, it shows the image. But in the HTMLView control a broken image is displayed. Thoughts?

Here is the relevant code (see bolded):

function getWeather() {
    fetch(weatherURL, moreHeaders)
        .then(response => response.json())
        .then(data => {
            freeData(data);
        })
        .catch(error => {
            console.error("Error fetching weather:", error);
        });
}

function freeData(apiData) {
    weatherData = apiData;
    let condition = weatherData.current.condition.text;
    let conMsg = weatherMessages[condition] || `Current weather: ${condition}`;
    let currTemp = `Current Temp : ${weatherData.current.temp_f}`
    let feelsLike = `Feels Like : ${weatherData.current.feelslike_f}`
    let chanceRain = `Chance of rain : ${weatherData.forecast.forecastday[0].day.daily_chance_of_rain}`
    let chanceSnow = `Chance of snow : ${weatherData.forecast.forecastday[0].day.daily_chance_of_snow}`
    let windSpeed = `Wind Speed in miles : ${weatherData.current.wind_mph}`
    let uv = `UV : ${weatherData.current.uv}`
    let dates = `Good day! The weather isn't as bright as a your smile! Todays date is : ${weatherData.forecast.forecastday[0].date}`   
    
    **let weatherIcon = `${weatherData.current.condition.icon}`**
**    console.log(weatherIcon)**
    
    lblCurrentTemp.value = currTemp
    lblFeelsLike.value = feelsLike
    lblRainChance.value = chanceRain
    lblSnowChance.value = chanceSnow
    lblWindSpeed.value = windSpeed
    lblUV.value = uv
    lblDay.value = dates

    **htmlWeatherIcon.innerHTML = '<img src="http:' + weatherIcon + '" />'**   
    
    // Display and store message
    lblWeather.textContent = conMsg;
    console.log(conMsg);
    currentWeatherValues.push(conMsg);

    // Log current condition
    console.table(currentWeatherValues);
}

// Trigger on button click
btnWeather.onclick = function () {
    getWeather();
};
13

Here is the console error message:

11
11763×183 22.7 KB

14

What happens if you go into Project Properties, in the Progressive Web App tab and set Make PWA? to false?

15

No change - get same error messages whether deploy to browser or Volt server.

16

@cindycc - should this maybe have its own topic? It’s really a separate issue.

Also - are you still getting the pwa error?