title: Images rendering as characters in a Bootstrap Modal
body: <p>I recently launched a simple single page portfolio site via Google App Engine (NodeJS) and everything works fine except when you click on an image gallery.  The images render slowly and come across as:</p>
  
  <blockquote>
    <p>����tExifII*>F(i�N���0230��� </p>
  </blockquote>
  
  <p>That is just the 1st paragraph. It goes on and on. I reached out to Google and while extremely helpful they determined it was something with my javascript. Bummer. They recommended I post here and see if anyone else could see where I have gone wrong. I have reviewed the other App Engine image questions and I can't find one similar to mine. It's either python or something I have already tried. </p>
  
  <p>My directory layout is:</p>
  
  <ul>
  <li>node_modules</li>
  <li>public
  -css
  -img
  -js
  -less
  -vendor</li>
  <li>app.js</li>
  <li>app.yaml</li>
  <li><p>package.json </p>
  
  <p>Here is my app.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   
     '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...");
  })</code></pre>
  </div>
  </div>
  </p></li>
  </ul>
  
  <p>Here is my app.yaml (side note...1st time coming across a yaml file so this could be it): </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>runtime: nodejs
  env: flex
  
  handlers:
  - url: /css
    static_dir: css
  
  - url: /js
    static_dir: js
  
  - url: /img
    static_dir: img  </code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the index.html for you minus everything but the header, the end of body scripts and the html where I have the gallery via a Bootstrap carousel:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Catamaran:200|Cormorant" rel="stylesheet"&gt;
      
  
      &lt;!-- Plugin CSS --&gt;
      &lt;link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet"&gt;
  
      &lt;!-- Theme CSS --&gt;
      &lt;link href="css/creative.min.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body id="page-top"&gt;
  
      &lt;section id="portfolio" class="portfolio"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row no-gutter"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-1 text-center"&gt;
                      &lt;h2&gt;Some of My Work&lt;/h2&gt;
                      &lt;hr class="small"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item gallery" style="padding-bottom: 30px"&gt;                         
                                  &lt;a href="img/portfolio/fullsize/entertainment/1.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-example-modal-lg"&gt;                 
                                    &lt;img src="img/portfolio/thumbnails/entertainment/1.jpg" class="img-responsive" alt=""&gt;
                                      &lt;div class="portfolio-box-caption"&gt;
                                        &lt;div class="portfolio-box-caption-content"&gt;
                                          &lt;div class="project-category text-faded"&gt;Category&lt;/div&gt;
                                              &lt;div class="project-name"&gt;Entertainment&lt;/div&gt;
                                        &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
                                  &lt;div class="modal-dialog modal-lg"&gt;
                                    &lt;div class="modal-content"&gt;
                                      &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
                                        &lt;!-- Wrapper for slides --&gt;
                                        &lt;div class="carousel-inner"&gt;
                                          &lt;div class="item active"&gt;
                                           &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/1.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/2.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/3.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/4.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/5.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/6.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/7.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/8.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/entertainment/9.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;!-- Controls --&gt;
                                    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                                      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                                    &lt;/a&gt;
                                    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                                      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                                    &lt;/a&gt;
                                  &lt;/div&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;                   
  
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item gallery" style="padding-bottom: 30px"&gt;                         
                                  &lt;a href="img/portfolio/fullsize/lifestyle/2.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-lifestyle-modal-lg"&gt;                 
                                    &lt;img src="img/portfolio/thumbnails/lifestyle/2.jpg" class="img-responsive" alt=""&gt;
                                      &lt;div class="portfolio-box-caption"&gt;
                                        &lt;div class="portfolio-box-caption-content"&gt;
                                          &lt;div class="project-category text-faded"&gt;Category&lt;/div&gt;
                                              &lt;div class="project-name"&gt;Lifestyle&lt;/div&gt;
                                        &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="modal fade bs-lifestyle-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
                                  &lt;div class="modal-dialog modal-lg"&gt;
                                    &lt;div class="modal-content"&gt;
                                      &lt;div id="carousel-example-lifestyle" class="carousel slide" data-ride="carousel"&gt;
                                        &lt;!-- Wrapper for slides --&gt;
                                        &lt;div class="carousel-inner"&gt;
                                          &lt;div class="item active"&gt;
                                           &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/1.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/2.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/3.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/4.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/5.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/6.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/7.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/8.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/9.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="item"&gt;
                                            &lt;img class="img-responsive" src="img/portfolio/fullsize/lifestyle/10.jpg" alt="..."&gt;
                                            &lt;div class="carousel-caption"&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
  
                                    &lt;!-- Controls --&gt;
                                    &lt;a class="left carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="prev"&gt;
                                      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                                    &lt;/a&gt;
                                    &lt;a class="right carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="next"&gt;
                                      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                                    &lt;/a&gt;
                                  &lt;/div&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;                            
                          &lt;/div&gt;                        
                      &lt;/div&gt;
                      &lt;!-- /.row (nested) --&gt;                    
                  &lt;/div&gt;
                  &lt;!-- /.col-lg-10 --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/section&gt;
  
      
  
      &lt;!-- jQuery --&gt;
      &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Plugin JavaScript --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/scrollreveal/scrollreveal.min.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/magnific-popup/jquery.magnific-popup.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Theme JavaScript --&gt;
      &lt;script src="js/creative.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And lastly here is my creative.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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); </code></pre>
  </div>
  </div>
  </p>
  
  <p>The last last thing... there are no errors in the console to refer too. Thanks in advance for the help</p>