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?