我最近通过Google App Engine（NodeJS）推出了一个简单的单页组合网站，除非您点击图片库，否则一切正常。图像呈现缓慢并且表现为：
tExifII*＆gt; F（i N 0230
这只是第1段。它会一直持续下去。我联系了谷歌，虽然非常有帮助，但他们确定这是我的javascript。游民。他们建议我在这里发帖，看看是否还有其他人能看到我出错的地方。我已经回顾了其他App Engine图像问题，我找不到与我相似的问题。这是python或我已经尝试过的东西。
我的目录布局是：
package.json
这是我的app.js：
'use strict';
req
uire('@google-cloud/debug-agent').start();
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.all('/', function(req, res) {
res.sendFile('index.html', { root: 'public'});
});
app.listen(8080, function () {
console.log("I'm listening...");
})
这是我的app.yaml（旁注...第一次遇到yaml文件，所以可能就是这样）：
runtime: nodejs
env: flex
handlers:
- url: /css
static_dir: css
- url: /js
static_dir: js
- url: /img
static_dir: img
这里的index.html除了标题，正文脚本的结尾以及通过Bootstrap轮播我拥有画廊的html之外的所有内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:200|Cormorant" rel="stylesheet">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row no-gutter">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Some of My Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item gallery" style="padding-bottom: 30px">
<a href="img/portfolio/fullsize/entertainment/1.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-example-modal-lg">
<img src="img/portfolio/thumbnails/entertainment/1.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category</div>
<div class="project-name">Entertainment</div>
</div>
</div>
</a>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/1.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/2.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/3.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/4.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/5.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/6.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/7.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/8.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/9.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item gallery" style="padding-bottom: 30px">
<a href="img/portfolio/fullsize/lifestyle/2.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-lifestyle-modal-lg">
<img src="img/portfolio/thumbnails/lifestyle/2.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category</div>
<div class="project-name">Lifestyle</div>
</div>
</div>
</a>
</div>
<div class="modal fade bs-lifestyle-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-lifestyle" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/1.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/2.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/3.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/4.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/5.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/6.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/7.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/8.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/9.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/10.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.js"></script>
</body>
</html>
最后这是我的creative.js：
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
// Initialize and Configure Scroll Reveal Animation
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 200);
sr.reveal('.sr-button', {
duration: 1000,
delay: 200
});
sr.reveal('.sr-contact', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 300);
})(jQuery);
最后一件事......控制台中也没有错误引用。在此先感谢您的帮助
答案 0 :(得分：0)
请注意，App Engine Flexible Environment不支持static_dir选项来提供静态文件;看到 Serving Static Files了解详情。您正在使用express.static来正确处理/ public文件夹。
看起来服务器正在为您的图片提供不正确的内容类型。检查HTTP标头（使用浏览器调试器中的“网络”选项卡）查看是否属于这种情况。
我刚刚使用node.js和Express在本地进行了一些测试，看起来它使用 serve-static ，它使用 send ，它使用 mime ，根据文件扩展名猜测Content-Type。出现错误的图像是否有没有扩展名的文件名，或者扩展名不正确？
答案 1 :(得分：0)
经过多次尝试，看到其他几个例子，其中一个有效的是alt-web: Bootstrap Modal + Carousel Tutorial
以下是我的工作模式/轮播的示例：
<div class="container">
<div class="row no-gutter">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Some of My Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item" style="padding-bottom: 30px">
<ul class="list-inline">
<li data-toggle="modal" data-target="#entertainmentModal"><a href="#entertainmentGallery" data-slide-to="0"><img class="img-thumbnail" src="img/portfolio/thumbnails/entertainment/1.jpg"><br>
Entertainment</a></li>
<!--begin modal window-->
<div class="modal fade" id="entertainmentModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Entertainment Gallery</div>
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="entertainmentGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active"> <img src="img/portfolio/fullsize/entertainment/1.jpg" alt="item0"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/2.jpg" alt="item1"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/3.jpg" alt="item2"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/4.jpg" alt="item3"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/5.jpg" alt="item3"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/6.jpg" alt="item3"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/7.jpg" alt="item3"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/8.jpg" alt="item3"></div>
<div class="item"> <img src="img/portfolio/fullsize/entertainment/9.jpg" alt="item3"></div>
</div><!--end carousel-inner-->
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#entertainmentGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#entertainmentGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--end carousel-->
</div><!--end modal-body-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end myModal-->
</div><!-- /.container -->
</div>