Images/Graphics will not load when launching Azure Web App.

Question

Images/Graphics will not load when launching Azure Web App.

Alexz Mercury 0

Hello,

I have been trying to figure out why webpages are not loading for me when I launch them via Azure.

For additional info:

I use Azure for Students
I have very little clue what I am doing, so ELI5 :(
I used "az webapp config container set --name [name] --resource-group [rg] --docker-custom-image-name [name] --enable-app-service-storage -t" and my webpage changes to the expected page, but no images will load. I have also tried using a domain directly from godaddy and connecting it to Azure via the walkthroughs, but I still have no images. I tried using a cloud container to put images in the /var/www/html index.html code via azure SSH, but the images still do not load. I tried opening the src images outside of the environment, and they work.

What can I do? I have been attempting to complete this for 10hrs now to no avail.

Relative path works, just not links. I cannot upload anything, however. I do not know how, and I cannot log in to RealFTP because I do not have a user/pass.

Alexz Mercury 0 Reputation points

2024-01-14T23:43:40.6333333+00:00

I set this up for a school project, but it is old, so I am working backwards.

Before this, I set up various things on my azure, all seemingly in working order. Editing the HTML changes the text, but not the images. The images stay broken.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T15:59:11.19+00:00

Can you check images names ? Linux (Docker) is case sensitive.
Alexz Mercury 0 Reputation points

2024-01-15T16:13:35.1666667+00:00

The images in the /assets/ folder are correct and case correct. I can use relative paths. I just cannot use SRC images from links. The docker container I got the webpage html and assets etc from should have worked with the images as links (the links themselves in the html are viewable and correct when I open the links in New tabs). At this point, I have been trying to add images via SSH, but I am unsure how I can set up RealFTP for having a way to, at the very least, continue using relative pathing. I just have no idea how I can set it up for this project, in particular.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T16:20:48.3533333+00:00

For docker you cannot use FTP, because image is stateless. You need to modify at build time.
Alexz Mercury 0 Reputation points

2024-01-15T17:18:36.62+00:00

Apparently, we are supposed to be using RealFTP to move images from our local PC to the Azure web app. I used the docker custom image name to pull the library/resources to start the webpage as the school wanted it. Afterwards, we were supposed to be using RealFTP to add local files for images if src links didn't work supposedly (which is the current situation). We would be using sftp:// in RealFTP, for instance, as we would be SSHing the files from our local disks over to Azure.

Issue, as well, is that I do not know which selections I should be choosing when creating info re: realftp, as there is so provided walkthrough for our class.

AKA: I cannot log in/I do not know how to make the user/pass credentials to log in to the FTP to ignore the current issue of webpage's css seeming off format and src image links not appearing.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T17:26:21.9533333+00:00

If you need to send image to your application, you need to choose a storage for this. Not inside container if this images change at runtime.
Alexz Mercury 0 Reputation points

2024-01-15T17:33:28.49+00:00

How could I do that?
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-16T23:54:16.05+00:00

Maybe you can consider to use a Azure Storage to put images and ue storage link into your app.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-01-18T06:30:30.2666667+00:00

@Alexz Mercury , Just checking in to see if you had got a chance to see the previous response by Carlos.
Please share the requested/more info to help you better.

1 answer

Your answer

Alexz Mercury 0 Reputation points

2024-01-14T23:43:40.6333333+00:00

I set this up for a school project, but it is old, so I am working backwards.

Before this, I set up various things on my azure, all seemingly in working order. Editing the HTML changes the text, but not the images. The images stay broken.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T15:59:11.19+00:00

Can you check images names ? Linux (Docker) is case sensitive.
Alexz Mercury 0 Reputation points

2024-01-15T16:13:35.1666667+00:00

The images in the /assets/ folder are correct and case correct. I can use relative paths. I just cannot use SRC images from links. The docker container I got the webpage html and assets etc from should have worked with the images as links (the links themselves in the html are viewable and correct when I open the links in New tabs). At this point, I have been trying to add images via SSH, but I am unsure how I can set up RealFTP for having a way to, at the very least, continue using relative pathing. I just have no idea how I can set it up for this project, in particular.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T16:20:48.3533333+00:00

For docker you cannot use FTP, because image is stateless. You need to modify at build time.
Alexz Mercury 0 Reputation points

2024-01-15T17:18:36.62+00:00

Apparently, we are supposed to be using RealFTP to move images from our local PC to the Azure web app. I used the docker custom image name to pull the library/resources to start the webpage as the school wanted it. Afterwards, we were supposed to be using RealFTP to add local files for images if src links didn't work supposedly (which is the current situation). We would be using sftp:// in RealFTP, for instance, as we would be SSHing the files from our local disks over to Azure.

Issue, as well, is that I do not know which selections I should be choosing when creating info re: realftp, as there is so provided walkthrough for our class.

AKA: I cannot log in/I do not know how to make the user/pass credentials to log in to the FTP to ignore the current issue of webpage's css seeming off format and src image links not appearing.
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-15T17:26:21.9533333+00:00

If you need to send image to your application, you need to choose a storage for this. Not inside container if this images change at runtime.
Alexz Mercury 0 Reputation points

2024-01-15T17:33:28.49+00:00

How could I do that?
Carlos dos Santos 85 Reputation points Microsoft Regional Director

2024-01-16T23:54:16.05+00:00

Maybe you can consider to use a Azure Storage to put images and ue storage link into your app.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-01-18T06:30:30.2666667+00:00

@Alexz Mercury , Just checking in to see if you had got a chance to see the previous response by Carlos.
Please share the requested/more info to help you better.

Answer 1

@Alexz Mercury , Following-up on the above, just to highlight additional pointers.

Adding to Carlos’ suggestions, I understand the images work locally, please review the file path and startup config, depending on your app web framework.

--Update content in hostingstart.html file. Uploading Images to Azure Storage from AngularJS App

--React is a SPA you will probably get a 404 trying to browse the site in certain routes. You need to redirect all queries to the index.html.
Use a startup command passing --spa argument to PM2 as followed: pm2 serve /home/site/wwwroot/build --no-daemon --spa or using a process file.

---sites using our php images have started seeing issues downloading static files (jpg,png,zip,pdf etc) > 2MB. Unable to download static content when using php images on Azure App Service - Linux

Refer /configure-nginx-for-php-8-linux-azure-app-service/ba-p/3069373

-- Ensure the image and/or tag is the same name and/or variable throughout the pipeline if dealing with a single image build.

See manifest not found’, tag not found, or image not found. Isolate if the issue is with any specific file types/extension, path, image exists and is correctly spelled, and Tag exists and is correctly spelled.

Just to highlight, if you haven't done - add a web.config file to the wwwroot folder with config content , which is highlighted/shared in this similar discussion thread.

Kindly let us know, I'll follow-up with you further.

Share via

Images/Graphics will not load when launching Azure Web App.

1 answer

Your answer