I'm self-hosting a Shortlist so I customize a few things. However the application won't fully load and just displays the broken image icon.
Here's a link to where it should be displaying, but it's not.
Heres a link to the ArcGIS hosted version, which works just fine.
Here's my index.html `<!DOCTYPE html>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link type="image/ico" rel="shortcut icon" href="https://community.esri.com//resources.esri.com/favicon.ico"> <link type="image/ico" rel="icon" href="https://community.esri.com//resources.esri.com/favicon.ico"> <!-- To correctly reference your Shortlist in search engine: - create and fill out extensively an ArcGIS Online item that link to your final application - edit the following four tags as well as the title tag above on line 4 --> <meta name="description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online."> <!-- Facebook sharing --> <meta property="og:type" content="article"/> <meta property="og:title" content="Story Map Shortlist"/> <meta property="og:description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online."/> <meta property="og:image" content="resources/common/icons/esri-globe.png"/> <!-- This application is released under the Apache License V2.0 by Esri http://www.esri.com/ Checkout the project repository on GitHub to access source code, latest revision, developer documentation, FAQ and tips https://github.com/Esri/shortlist-storytelling-template-js --> <script type="text/javascript"> //------------------------------------------------------------------------------------------- // Application configuration (ignored on ArcGIS Online, Portal and during development) //------------------------------------------------------------------------------------------- var configOptions = { // Enter an application ID created through the Shortlist builder appid: "b8d0e8bea0a24152bb472b3ab9540a59", // Optionally to secure Shortlist's access, use an OAuth application ID (example: 6gyOg377fLUhUk6f) // User will need to sign-in to access the viewer even if your application is public oAuthAppId: "", // Optionally to be able to use the appid URL parameter, configure here the list of application author // whose application are allowed to be viewed by this Shortlist deployment // This is the Portal username of the Shortlist owner (e.g. ["user1"], ["user1", "user2"]) authorizedOwners: ["*"] }; // Optionally sharing and proxy URLs can be configured in app/config.js. This is only required // when the webmap is not hosted on ArcGIS Online or a Portal for ArcGIS instance and the application isn't deployed as /home/Shortlist/ or /apps/Shortlist/. // Optionally Bing Maps key, Geometry and Geocode service's URLs can be configured in app/config.js. This is only required // if the Organization or Portal for ArcGIS instance default configuration has to be overwritten. </script> <!-- Edit below at your own risk --> <script type="text/javascript"> var app = { version: '2.0.1', pathJSAPI: '//js.arcgis.com/3.18/' }; </script> </head> <body class="claro"> <style> /* CUSTOM CSS RULES */ </style> <!-- Builder top panel is injected here --> <div id="builderPanel" class="hide mainViewAboveMap"></div> <!-- Header --> <div id="header" class="mainViewAboveMap"> <!-- Desktop header --> <div id="headerDesktop" aria-hidden="true"> <div class="rightArea"> <div class="linkSocialContainer"> <button type="button" class="switchBuilder btn btn-xs btn-primary" tabindex="-1"></button> <span class="linkContainer"></span> <span class="shareBtns"> <i class="shareIcon blackHover share_facebook icon-facebook-squared" title="Share on Facebook"></i> <i class="shareIcon blackHover share_twitter icon-twitter" title="Share on Twitter"></i> <i class="shareIcon blackHover share_bitly icon-link" title="Share a short link"></i> </span> </div> <div class="logoContainer"> <table class="logoContainerInner"> <tr> <td class="logoWrapper"> <a class="logoLink" target="_blank" tabindex="-1"> <img class="logoImg"/> </a> </td> </tr> </table> </div> </div> <div class="textArea"> <h1 class="title" tabindex="0"></h1> <h2 class="subtitle" tabindex="0"></h2> </div> <div class="builder-mask"></div> </div> </div> <!-- Tab/bullet navigation bar --> <div id="nav-bar" class="mainViewAboveMap"></div> <!-- Content --> <div id="contentPanel" class="mobileView"> <div id="mobileBookmarksCon"> <div id="mobileBookmarksToggle"><p id="mobileBookmarksTogText"></p></div> <div id="mobileBookmarksDiv"></div> </div> <div id="mainStagePanel"> <div class="needsclick" id="map"> <div id="search"></div> </div> <div id="builderLandingOverlay"></div> <!--<div id="builderQuotes"></div>--> <div id="builderLanding"></div> </div> <!--<div id="testPanel" class="testPanel"></div>--> <!-- Mobile View --> <div id="mobileThemeBar"> <div id="navThemeLeft"> <div class="detail-btn ion-chevron-left" style="outline: none;"></div> </div> <div id="navThemeRight"> <div class="detail-btn ion-chevron-right" style="outline: none;"></div> </div> <div id="mobileThemeSliderContainer" class="swiper-container"> <div id="mobileThemeBarSlider" class="swiper-wrapper"></div> </div> </div> <div id="mobilePaneList"> <ul id="mobileList" class="mobileTileList" data-role="listview"></ul> <div class="noFeature"> <span class="noFeatureText"> <!--There are no features within the current map extent. Click on the home button to return to the initial extent.--> </span> </div> </div> <div id="mobileSupportedLayersView"></div> <div id="mobilePaneFader"></div> </div> </div> <!-- Loading --> <style> #loadingOverlay { position: absolute; top: 0; left: 0; z-index: 1100; width: 100%; height: 100%; overflow: hidden; background-color: #E5E5E5; -webkit-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3); box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3); } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-ms-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } #loadingOverlay.fadeOut { -webkit-animation: fadeout 1.1s; -moz-animation: fadeout 1.1s; -ms-animation: fadeout 1.1s; -o-animation: fadeout 1.1s; animation: fadeout 1.1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; } #loadingIndicator { position: fixed; top: 50%; left: 50%; z-index: 1101; } .loadingIndicator { margin-left: -17px; margin-top: -20px; } /* * Inlining of resources/tpl/viewer/font/font/css/fontello.css and animation.css */ @font-face{font-family:'fontello';src:url(resources/tpl/viewer/font/font/fontello.eot?22851922);src:url(resources/tpl/viewer/font/font/fontello.eot?22851922#iefix) format("embedded-opentype"),url(resources/tpl/viewer/font/font/fontello.woff?22851922) format("woff"),url(resources/tpl/viewer/font/font/fontello.ttf?22851922) format("truetype"),url(resources/tpl/viewer/font/font/fontello.svg?22851922#fontello) format("svg");font-weight:400;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.icon-spin1:before{content:'\e800'}.icon-link:before{content:'\e801'}.icon-facebook-squared:before{content:'\e802'}.icon-twitter:before{content:'\e803'}.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}} </style> <div id="mobileBuilderOverlay"></div> <div id="loadingOverlay"></div> <div id="loadingIndicator" class="loadingIndicator"> <img src="resources/tpl/viewer/icons/loading-light.gif" /> </div> <div id="loadingMessage"></div> <!-- Share dialog --> <div class="modal fade shareDialog" id="shareDialog" role="dialog" data-backdrop="static" tabindex="-1"></div> <!-- Builder views are injected here --> <div id="builder-views"></div> <!-- Fatal error box --> <div id="fatalError"> <table border="0"> <tr> <td width="70px" align="center" id="fatalError-icon"></td> <td id="fatalError-msg"> <b class="error-title"></b> <p class="error-msg"></p> </td> </tr> </table> </div> <script type="text/javascript" src="app/main-config.js"></script> <script type="text/javascript"> require(["dojo/topic"], function(topic) { // The application is ready topic.subscribe("tpl-ready", function(){ /* */ }); }); </script> </body>
'
