Uploading images along with Google App Engine - google-app-engine

Question

I'm working on a Google App Engine project.
My app is working and looking correct locally, but when I try to upload images in an image directory, they're not being displayed at appspot.
As a little troubleshoot, I put a HTML page in "/images/page2.html" and I can load that page at the appspot, but my pages don't display my images. So, it's not a problem with my path.
As another sanity check, I'm also uploading a style sheet directory with .css code in it, and that's being read properly.
I have a suspicion that the problem lies in my app.yaml file.
Any ideas?
I don't want to paste all the code here, but here are some of the key lines. The first two work fine. The third does not work:
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />
Page 2
<img src="/images/img.gif">
This is my app.yaml file
application: myApp
version: 1
runtime: python
api_version: 1
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
- url: /.*
script: helloworld.py

Answer 1

You have to configure app.yaml for static content such as images and css files
Example:
url: /(.*\.(gif|png|jpg))
static_files: static/\1
upload: static/(.*\.(gif|png|jpg))
For more info check out:
http://code.google.com/appengine/docs/configuringanapp.html

Answer 2

I'll bet your problem is that you're using Windows.
If that's the case, I believe you need a preceding slash for your static_dir value.

Answer 3

I am using the Java version of App engine, and I faced a similar issues with the server not able to serve static images.
What worked ultimately was to change the AppEngine config file "appengine-web.xml" in my case to contain
<static-files>
<include path="**.*"/>
<include path="/images/**.*" />
</static-files>
My images are in the /images directory and HTML and CSS are in . directory which is at the WEB-INF level

Answer 4

#jamtoday The preceding slash didn't make a difference, but it did get me started figuring out what each app needs to be told what about my directory structure.
So, I have nothing very conclusive to add, but I wanted to follow up, because I got it working, but I didn't explore all the issues after I got it working.
One change that helped was to stop working from a HwlloWorld/src/ directory and start working in the HelloWorld/ directory. It seems like the dev_appserver picked up all the dependencies, but the remote server didn't. Essentially, the relative path of my local links didn't match the relative path of the links after uploading.
I also realized that the dev-appserver relies on the .yaml file, as well as the appcfg script. That is. . .if you add a directory to your project, and then try to link to files in that directory, you need to add the directory to the .yaml file, and then restart the dev-appserver to pick up on this.
So, there are probably ways to handle what I was originally trying to do if you give the .yaml file the right info, but changing to a different directory structure locally handled it for me.

Answer 5

<img src="/images/img.gif">
this line can't show you the image.
Try this one:
1-Create a class to handle "image request"
class GetImage(webapp.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'image/jpg'
self.response.out.write(image_object)
2-In your page.html:
<img src="/image"
3-At the main function in your code.py:
application = webapp.WSGIApplication(('/image', GetImage), debug=True)
have fun