照片库适用于 GAE AppSpot，但不适用于 127.0.0.1
photo gallery works on gae appspot but not on 127.0.0.1
当我在应用程序引擎上部署我的应用程序时，图库可以工作（http://mark-smith-app.appspot.com/projects/），但它不能离线工作。
我想让我的画廊使用以下命令：
C:'Python27'python.exe "C:/Program Files/Google/google_appengine/dev_appserver.py" .
当我打开 chrome 并转到 127.0.0.1/projects/时，它显示了图库，但只显示第一张图像，图库中的其余图像都是"黑色"。
我从 http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/下载了图库
我下载的图库附带了一个示例 index4.html当我使用 chrome 打开它时，它可以工作。
我将 index4.html 中的所有内容复制到我的 google App Engines 项目中.html并更改了 css、js 和图像的静态目录。
这是app.yaml：
application: mark-smith-app
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
- url: /.*
script: main.app
libraries:
- name: jinja2
version: latest
我还转到 127.0.0.1/projects，然后转到"查看源代码"并将其复制到 html1 中.txt
我还将 index4.html 中的"查看源代码"复制到 html2 中.txt
我从以下python不同脚本中得到了以下结果：
f1 = open('html1.txt')
f2 = open('html2.txt')
from difflib import ndiff,IS_CHARACTER_JUNK
delta = ndiff([i.strip()+"'n" for i in f1],[i.strip()+"'n" for i in f2])
for line in delta:
print line,
输出：
*** Python 2.7.2 (default, Jun 12 2011, 15:08:59) [MSC v.1500 32 bit (Intel)] on win32. ***
>>>
<!DOCTYPE html>
<html>
<head>
<title>Awkward Showcase - Demo #4</title>
- <link rel="stylesheet" href="/stylesheets/style.css" />
? ^ ---------
+ <link rel="stylesheet" href="css/style.css" />
? ^
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
- <script type="text/javascript" src="/stylesheets/jquery.aw-showcase.js"></script>
? -------------
+ <script type="text/javascript" src="jquery.aw-showcase.js"></script>
<script type="text/javascript">
$(window).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 700,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'fade', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
</head>
<body>
<div class="menu"><a href="index.html">Demo #1</a> (Normal) | <a href="index2.html">Demo #2</a> (Vertical thumnbails) | <a href="index3.html">Demo #3</a> (Horizontal thumbnails) | <a href="index4.html" class="active">Demo #4</a> (Dynamic height) | <a href="index5.html">Demo #5</a> (Hundred percent) | <a href="index6.html">Demo #6</a> (Viewline)</div>
<div id="error"></div>
<div style="width: 700px; margin: auto;">
<!-- This is the button used to switch between One Page and Slideshow. -->
<p><a id="awOnePageButton" href="#"><span class="view-page">View As One Page</span><span class="view-slide">View As Slideshow</span></a></p>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<!-- For dynamic height to work in webkit you need to set the width and height of images in the source.
Usually works to only set the dimension of the first slide in the showcase. -->
- <img src="/images/05.jpg" alt="05" width="700px" height="600px" />
? -
+ <img src="images/05.jpg" alt="05" width="700px" height="600px" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/05.jpg" alt="05" width="140px" />
? -
+ <img src="images/05.jpg" alt="05" width="140px" />
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
- <img src="/images/01.jpg" alt="01" />
? -
+ <img src="images/01.jpg" alt="01" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
- <img src="/images/01.jpg" alt="01" width="140px" />
? -
+ <img src="images/01.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the caption content in a div with the class .showcase-caption -->
<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/04.jpg" alt="04" />
? -
+ <img src="images/04.jpg" alt="04" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/04.jpg" alt="04" width="140px" />
? -
+ <img src="images/04.jpg" alt="04" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/03.jpg" alt="03" />
? -
+ <img src="images/03.jpg" alt="03" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/03.jpg" alt="01" width="140px" />
? -
+ <img src="images/03.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/02.jpg" alt="02" />
? -
+ <img src="images/02.jpg" alt="02" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/02.jpg" alt="01" width="140px" />
? -
+ <img src="images/02.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<div class="showcase-tooltips">
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
<a href="http://www.awkward.se" coords="634,130">
<!-- The content of the anchor-tag is displayed in the tooltip. -->
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="200,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="600,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="356, 172">
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
- <img src="/images/glasses.png" />
? -
+ <img src="images/glasses.png" />
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
White Glasses: 500$
</span>
</a>
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 50px;">
<a href="http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin">
Click here to download and learn more about this jQuery plugin.
</a>
</div>
</body>
</html>
>>>
日志如下： 我运行应用程序，单击项目链接转到/projects/页面，图库正确显示 05.jpg然后你可以看到我点击到 01 和 04.jpg，然后回到 05.jpg（05.jpg 是唯一没有被黑掉的）。缩略图虽然有效。
C:'Python27'python.exe "C:/Program Files/Google/google_appengine/dev_appserver.py" .
WARNING 2012-04-22 23:50:20,888 rdbms_mysqldb.py:74] The rdbms API is not available because the MySQLdb library could not be loaded.
INFO 2012-04-22 23:50:21,914 appengine_rpc.py:160] Server: appengine.google.com
INFO 2012-04-22 23:50:21,921 appcfg.py:581] Checking for updates to the SDK.
INFO 2012-04-22 23:50:23,601 appcfg.py:599] The SDK is up to date.
INFO 2012-04-22 23:50:23,891 dev_appserver_multiprocess.py:650] Running application dev~mark-smith-app on port 8080: http://localhost:8080
INFO 2012-04-22 23:50:23,891 dev_appserver_multiprocess.py:652] Admin console is available at: http://localhost:8080/_ah/admin
WARNING 2012-04-22 23:50:24,252 py_zipimport.py:139] Can't open zipfile C:'Python27'lib'site-packages'pyfacebook-1.0a2-py2.7.egg: IOError: [Errno 13] file not accessible: 'C:''Python27''lib''site-packages''pyfacebook-1.0a2-py2.7.egg'
INFO 2012-04-22 23:50:25,663 dev_appserver.py:2865] "GET / HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,744 dev_appserver.py:2865] "GET /stylesheets/main.css HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,825 dev_appserver.py:2865] "GET /images/home.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,960 dev_appserver.py:2865] "GET /favicon.ico HTTP/1.1" 404 -
INFO 2012-04-22 23:50:32,076 dev_appserver.py:2865] "GET /projects/ HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,164 dev_appserver.py:2865] "GET /stylesheets/style.css HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,257 dev_appserver.py:2865] "GET /stylesheets/jquery.aw-showcase.js HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,414 dev_appserver.py:2865] "GET /images/05.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,499 dev_appserver.py:2865] "GET /images/black-opacity-40.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,572 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,651 dev_appserver.py:2865] "GET /images/white-opacity-80.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,730 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,811 dev_appserver.py:2865] "GET /images/03.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,891 dev_appserver.py:2865] "GET /images/02.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,973 dev_appserver.py:2865] "GET /images/glasses.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,045 dev_appserver.py:2865] "GET /images/arrows-small.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,122 dev_appserver.py:2865] "GET /images/arrows.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,220 dev_appserver.py:2865] "GET /favicon.ico HTTP/1.1" 404 -
INFO 2012-04-22 23:50:38,493 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:44,198 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:46,536 dev_appserver.py:2865] "GET /images/03.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:52,927 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:54,806 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:57,243 dev_appserver.py:2865] "GET /images/05.jpg HTTP/1.1" 304 -
从给定的信息中几乎不可能知道确切的原因是什么，但是开发服务器和生产服务器之间存在一个很大的区别：开发服务器是单线程的，因此，如果在图像请求进入之前无法完成请求，最终浏览器将超时并不再尝试渲染图像。
查看开发服务器写出的日志会很有用。
相关文章：
- HTML5 Canvas toDataURL(“image/png”）适用于一些绘画，而有些则不然，不确定原因
- JavaScript不显示剩余字符，但适用于其他页面
- 我如何完善这个Javascript代码，使其只适用于来自图像的链接(而不是来自文本的链接）
- 为什么这只适用于身体部分而不是头部
- 为什么不't此正则表达式适用于重复出现的对
- document.getElementById 对内部 html 的调用适用于 $_POST 和 $_GET 变量，但不
- JavaScript 位置适用于本地主机而不是服务器
- Rally App SDK 2.0:Rallymultiobjectpicker，适用于不显示displayField的
- jQuery事件在Mozilla上不起作用，并且适用于其他浏览器
- Angular.js - 控制器不为索引执行，适用于其余模板
- D3 .on 更改适用于文本而不是图表
- Zillow 数据 - json_encode不起作用 - 适用于常规变量
- 弹出模式仅适用于表格中的第一个元素，第二次单击后不会再次打开
- Phonegap Android项目适用于模拟器，而不是实际的手机
- ajax jonp 不应该适用于 请求的上不存在“访问控制-允许源”标头
- AngularJS:ng-单击不起作用，适用于<按钮>
- Javascript不会在移动设备上加载.适用于桌面
- 为什么我的代码适用于高度:100px，而不是高度:100%
- 拖放区.js + Laravel-多文件上传不起作用(仅适用于一个文件）
- 哪些限制适用于不透明响应
