Some images won't load on Google Cloud app

#1

Hello, I built a simple website and uploaded it to the Google Cloud Standard environment, unpaid. However two of the background pictures won’t load and I don’t know why, ie whether they won’t upload, whether they won’t serve, and if not why.

For example, this page should have a background. It has one when working locally from the files.

https://botanybolt-198103.appspot.com/registration.html

I don’t get any errors when uploading or whatever, I’m wondering if there is a quota for storage or something, but I can’t see where to find that out.

Thanks in advance for any insight.

#2

image
image1213×69 3.35 KB

Is the path that you are using for that jpeg possibly not correct for the image’s location on your server?

#3

I’m serving from the Google Cloud app place. The path is correct and works when I use it locally through my computer.

The CSS is this:


#course_background {
	background-image: url("images/runners_back.jpg");
}

#registration_background {
	background-image: url("images/regos.jpg");
}

#gallery_background {
	background-image: url("images/gallery.jpg");
}

and that links to the html here:

		<div id="registration_background" class="topphoto">
		</div>

Other backgrounds work and have the same formatting, for example the gallery and course backgrounds shown above.

#4

I know that the path is correct on your computer, but I was suggesting that you look to see if the path is still valid on your live application.

It looks like none of those jpegs are in your images folder:
image

#5

How do I see that screenshot you just posted, is it in the dev tools?

The other .jpgs are there, for example gallery.jpg, runners_back.jpg.

I just wonder why it doesn’t upload the registration and the results background jpgs when I do ‘gcloud app deploy’. I assumed it would just upload everything in the static folder, including what is in the ‘images’ folder.

Capture

The files aren’t bigger than others or a different format.

#6

I just posted a screenshot of the devtools.

Your screenshot is of the files on your local machine. Those files are not on your server.

#7

When you say devtools, do you mean the browser’s devtools or appspot.com’s dev tools. I can not figure out how you are seeing what your screenshot shows. I feel a learning opportunity coming on.

#8

I’m using chrome’s devtools. I know nothing about appspot.com.

image
image1218×417 33.8 KB

#9

If you change your background image reference from:

#registration_background {
	background-image: url("images/regos.jpg");
}

to

#registration_background {
	background-image: url("images/regos.JPG");
}

it should work, because I can go to https://botanybolt-198103.appspot.com/images/regos.JPG and see an image.

#10

I was confused at first, because when I looked in Chrome’s devtools it showed the regos.JPG but your screenshot did not. I assume the OP uploaded since your post, because the iimage is on the server now. I replied with how the OP can fix.

#11

There’s something peculiar with the way it’s structured. Look at the difference between https://botanybolt-198103.appspot.com and https://botanybolt-198103.appspot.com/registration.html

image
image720×389 22.5 KB

image
image1313×898 253 KB

#12

That is odd for sure.

#13

Thank you both for looking at this.

Randell you are right, it was the case-sensitivity of the file extension. The original photos that didn’t load were .JPG. I changed this to .jpg while renaming them. I was unaware that this made a difference and locally using Chrome and Firefox it did not make a difference. But somehow on the Google Cloud it was remembering it’s old .JPG value. Even though the file names were renamed .jpg and the css used .jpg, deep down those files wanted to be .JPG.