GAE does not have access to background images

Having trouble loading background pictures in my GAE front-end app.

"Failed to load resource: the server responded with a status of 404 (Not Found)".

My app is a simple website, no GAE backend. Using Eclipse with Google AppEngine Plugin.

Background pictures change every 10 seconds using JQuery.

Oddly, out of 16 background pictures, the 3rd and 11th always load, rest never do. (And yes, names are correct)

If there's an error accessing pictures, shouldn't they all fail?

Something missing? Googled but no luck, works fine locally.

Icons and headers load perfectly, issue only with big backgrounds. No browser difference.

Tried (without success):

  • Increased stack size to see if deployment caused issues.
  • No app.yaml file, tried adding with image folder location specified.
  • Moved backgrounds from "images/background" to just "images".
  • Tested with simple color backgrounds - worked, then failed except for 3rd and 11th without code changes.

Any ideas why it works locally but not on GAE? Differences in environment somewhere..?

Snippet of code:

var photos = [ {
"image" : "p1.jpg",}, {
"image" : "p2.jpg",}, {
"image" : "p3.jpg",}, { 
// pictures 4-10
    "image" : "p11.jpg",}, { 
// pictures 12-15
    "image" : "p16.jpg",
        }
        ];


// Set the background image of the new active container
$("#backgroundimg" + activeContainer).css({
    "background-image" : "url(images/" + photoObject.image + ")",
    "display" : "block",
    "z-index" : currentZindex
});

// Fade out the current container
// and display the header text when animation is complete
$("#backgroundimg" + currentContainer).fadeOut(function() {
    setTimeout(function() {
        animating = false;
    }, 1000);
});

Answer №1

Consider utilizing absolute image references instead of relative ones. When referencing images relatively, it is from the current directory:

url(images/" + photoObject.image + ")"

For absolute reference, use the document root to ensure it works regardless of the current directory. It seems like Google App Engine may be dynamically altering the directories based on other code.

url(/images/" + photoObject.image + ")"

I'm also interested in the structure of the photos object. To make it more manageable, you could consider:

var photos = ["p1.jpg", "p2.jpg", "p3.jpg", "p11.jpg", "p16.jpg"];

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The div is lacking in height

I have 3 divs that belong to the stackContainer class: .stackContainer { position: relative; } Within these divs, I want multiple elements stacked on top of each other. To achieve this, I use the following code: .stackItem { position: absolute; ...

Executing a jQuery code within a WordPress theme

I have been attempting to implement the following script within the header.php file of a Wordpress website: <script> jQuery(function($) { jQuery('[href=#membership]').attr( 'data-menu-top', '500' ); }); ...

Despite having a hover animation, the CSS animation remains stuck

I'm looking to create a hover animation where one picture disappears upon hovering and is replaced by another picture, but I'm having trouble getting the back picture to disappear My attempt involved changing opacity from 1 to 0 with a transitio ...

How can you create a scenario in Angular Material where items in a toolbar transition to the second line exclusively on mobile screens?

Visit the Angular Material website to see how the toolbar appears on a desktop: https://material.angular.io/ On mobile devices, the menu items Components, CDK, and Guides are displayed on the second line, while github, theme icon, and version number dropd ...

Top method for identifying "abandoned words" within text that has been wrapped

Our content and design teams have a specific request to prevent paragraphs from ending with an "orphan word" - a single word on the last line of text that has wrapped onto multiple lines. The designer's proposed solution is to adjust the margins sligh ...

Tips for building dynamic web interfaces that allow for interactive communication in both directions

I'm struggling to find the right keywords to search for, so I'll explain what I'm attempting to accomplish using a basic example and see if anyone can suggest some potential techniques or technologies. Imagine a scenario where one or more i ...

Show the Select component in a grid format with a list view, displaying three items per row

Within my react Dropdown component, there is currently a list view displayed when an item is selected. However, I am looking to modify it so that the items are arranged in a grid format with 3 items per row. Sample Code: import { Dropdown } from 'pri ...

Is it possible to trigger a method on the current PHP page as well as a method in another PHP script at the same time when submitting a form using jQuery Ajax

Can someone assist me? I am new to PHP and feeling overwhelmed with the PHP request process. Implementing an MVC structure for view, I have created an HTML form. When the form is submitted, I need to execute two different methods - sendMail() and validate ...

What is the technique for enabling a mouse click in the vicinity of an element?

During a presentation on React at a conference, I witnessed the speaker introduce a feature that allowed users to click and drag a divider on the screen by simply getting close to it instead of having to click directly on it. This concept adds to usabilit ...

Setting a JavaScript variable to null

Using Jquery, I have a variable that is assigned a value on button click. After the code executes successfully, I need to reset the variable to null. $("#btnAdd").click(function () { var myDataVariable= {}; myDataVariable.dataOne="SomeDa ...

Identifying and eliminating all elements that have a class containing certain text

There is an object that has been injected into the body of my webpage using a jquery plugin. However, I am interested in selecting all elements that contain specific text within their classes. For example, the classes look like "genericforall**." The ter ...

Utilizing Jquery Ajax calls to populate a user list on project selection

I am currently utilizing Jira and in need of populating the list of users for the selected project. <td><select id="projectsList" class="textFld" multiple="multiple"></select></td> <td><select id="userList" class=" ...

Developing with Cordova involves collaborating with PHP and MySQL for efficient and seamless

As a newcomer to the world of cordova, I am currently in the process of familiarizing myself with its syntax. At this stage, I have manually inputted some json data and developed an application. In this app, when a user chooses a serial number from a dropd ...

Avoid wrapping elements

Is there a foolproof method or best practice to prevent an HTMLElement from wrapping? Specifically, I'm referring to elements with relative positioning. One possible solution could be using absolute elements and adjusting their left position based on ...

Send the data from a div to a different page using PHP

Is there a way to pass the value displayed in DIV id to another page? The data is retrieved from another page and shown within the given code. <div id="res" style="float: left; Padding-left: 3px; padding-right:13px;line-height: 15px;"> ...... ...

Easy-to-use form input ensuring a constant total of 100

Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...

Choose from Select2 options with added descriptions

I am utilizing the jQuery Select2 plugin to enhance select boxes. I have a requirement to include a description for each option. The current display when opening the select box shows: One Two Three Four However, my desired outcome is to display: One *De ...

How to use Ajax to update a Filefield in Django

Looking for a way to update an object's FileField using Ajax? I've created a wav blob in the browser and am trying to pass it by appending it to a FormData instance: var data = new FormData(); data.append('sound', blob); ...

Eliminate viewed alerts by implementing a scrolling feature with the help of Jquery, Javascript, and PHP

My goal is to clear or remove notifications based on user scrolling. The idea is to clear the notification once the user has seen it, specifically in a pop-up window for notifications. I am relatively new to Javascript/jQuery and feeling a bit confused abo ...

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...