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

Form submitted using ajax did not receive a success confirmation

I have been working on creating a contact form for WordPress using ajax, but I am encountering an issue with the success function in jQuery not appending the confirmation message. PHP Function add_action('wp_ajax_submit_form', 'submit_form ...

Google Docs integrated with JqueryMobile for seamless document creation and editing

Recently, I experimented with a plugin that allows for viewing pdf documents directly in the browser. While it worked flawlessly on my desktop browser, I encountered some display issues when trying to access it from my mobile device. The document didn&apos ...

Mastering the art of iterating through a JSON response

Looking to populate a combobox with data from the database. Upon accessing mystream.php?theLocation=NewYork, I receive the following JSON response: RESULT {"result": [{"theID":"36"},{"theStream":"0817-05131"},{"theLabel":"hgjbn"},{"theLocation":"NewYork ...

The issue arises when trying to use the Jquery .addClass() function in Chrome, yet it functions perfectly in Mozilla Firefox

I am trying to apply a class to my input tag using the addClass method in jQuery, but it doesn't seem to be working in Chrome! ` $('#username-signup').blur(function() { var tempusername = $('#username-signup').v ...

Here's a unique version of the text: "A common issue in Django is the AttributeError that states 'Country' object does not have the attribute 'City_set'. Here's how

I am dealing with 3 dependent dropdown lists - country, city, and road. The country dropdown list is populated from the database and based on the selection of the first one, the second will display the related cities. However, an error occurs when a user ...

How can you determine if a particular attribute of an object has changed during the process of 'placing' the object?

Is there a way to efficiently determine if a specific property of a db.Model has been changed in comparison to the version saved in the datastore before calling put()? I want to skip retrieving a new instance from the database if possible. Any suggestion ...

Can a function be passed to the URL field in an AJAX request?

Can a function be passed to the url field in an ajax call? I am looking to dynamically change the url being used in the ajax call. function generateURL(){} $.ajax({ url: generateURL, context: document.body, success: function(){ $(this).addCla ...

Content editable div causing overflow issues in Internet Explorer

I am having trouble with a content editable div where the text is not wrapping properly. I attempted to use "overflow:scroll" but it only ends up cutting off the text horizontally. https://i.stack.imgur.com/WlMdY.jpg ...

How do I navigate to the homepage in React?

I am facing an issue with my routes. When I try to access a specific URL like http://localhost:3000/examp1, I want to redirect back to the HomePage. However, whenever I type in something like http://localhost:3000/***, I reach the page but nothing is dis ...

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

Click here to see the image

I'm looking to enhance an image with a hyperlink. This is the code I have so far. How can I make the image clickable? success: function(data, textStatus, jqXHR){ $.each( data, function( idx, obj ) { // $( "<img>" ).attr( "src", '/ima ...

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

waiting to display information until it is necessary

I am currently working on optimizing my website for improved loading speed and responsiveness. Users can scroll through up to 4k images, apply filters, and sort them based on their preferences. Below is the code snippet for my filtering function: function ...

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

Maximizing values entered into form fields

Looking for a way to extract the highest number from a set of input fields in an HTML form using JavaScript? Take this example: <input id="temp_<strong>0</strong>__Amount" name="temp[<strong>0</strong>].Amount" type="text" valu ...

Merge text with a URL using jQuery

I've recently delved into the world of JQuery and have been experimenting with some code: @section Scripts{ <script type="text/javascript"> $(function() { $('#submitButton').on('click', function () { ...

Step-by-step guide on how to load an Ext JS tab after clicking on it

I have an Ext JS code block that creates 4 tabs with Javascript: var tabs; $(document).ready( function() { fullscreen: true, renderTo: 'tabs1', width:900, activeTab: 0, frame:true, ...

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

What is the proper way to mention "a" within an unsorted list?

I currently have a div section with the following content: <ul id = "issues"> <li> <h1>title</h1> <p>text text text </p> <a class="next" href="#">next</a> </li> <li> <h1>title</h1> &l ...