Product images (main & thumbnails) are not displaying on product page.
Only error logged in browser console shows:

Uncaught TypeError: Cannot read property 'show' of undefined



About my build:

  • magento 2.1.1, upgraded via CLI
  • nexcess magento hosting setup
  • sample data deployed
  • custom child theme
  • Magento/luma parent theme
  • no modifications to catalog/product/view templates or layout

Page source / browser output:

<div class="column main">
    <div class="product-info-main">...</div>
    <div class="product media"><div class="gallery-placeholder" data-gallery-role="gallery-placeholder"><!--
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
    <div class="fotorama-item" data-gallery-role="gallery">
        <div data-gallery-role="fotorama__focusable-start" tabindex="-1"></div>
        <div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--toggle-arrows">
            <div class="fotorama__stage" data-fotorama-stage="fotorama__stage">
                <div class="fotorama__arr fotorama__arr--prev" tabindex="0" role="button" aria-label="Previos" data-gallery-role="arrow">
                    <div class="fotorama__arr__arr"></div>
                <div class="fotorama__stage__shaft" tabindex="0" data-gallery-role="stage-shaft">
                <div class="fotorama__arr fotorama__arr--next fotorama__arr--disabled" tabindex="-1" role="button" aria-label="Next" data-gallery-role="arrow">
                    <div class="fotorama__arr__arr"></div>
                <div class="fotorama__video-close"></div>
                <div class="fotorama__zoom-in" data-gallery-role="fotorama__zoom-in" aria-label="Zoom in" role="button" tabindex="0"></div>
                <div class="fotorama__zoom-out" data-gallery-role="fotorama__zoom-out" aria-label="Zoom out" role="button" tabindex="0"></div>
                <div class="fotorama__spinner"></div>
            <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
                <div class="fotorama__nav fotorama__nav--thumbs">
                    <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" aria-label="Exit fullscreen" role="button"></div>
                    <div class="fotorama__thumb__arr fotorama__thumb__arr--left" role="button" aria-label="Previos" data-gallery-role="arrow" tabindex="-1">
                        <div class="fotorama__thumb--icon"></div>
                    <div class="fotorama__nav__shaft">
                        <div class="fotorama__thumb-border"></div>
                    <div class="fotorama__thumb__arr fotorama__thumb__arr--right" role="button" aria-label="Next" data-gallery-role="arrow" tabindex="-1">
                        <div class="fotorama__thumb--icon"></div>
        <div data-gallery-role="fotorama__focusable-end" tabindex="-1"></div>
    <div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
    <!--Fix for jumping content. Loader must be the same size as gallery.-->
        var config = {
                "width": 700,
                "thumbheight": 110,
                "navtype": "slides",
                "height": 560        },
            thumbBarHeight = 0,
            loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

        if (config.navtype === 'horizontal') {
            thumbBarHeight = config.thumbheight;

        loader.style.paddingBottom = ( config.height / config.width * 100) + "%";

    </div><div class="bundle-options-container">...
  • Pls. check Image URL by Inspect Element/Firebug
    – Jackson
    Commented Sep 29, 2016 at 3:42
  • No product image to inspect. Not even a placeholder image. You can see code above. No img tags are even being output.
    – Joshua34
    Commented Sep 29, 2016 at 3:49
  • emiprotechnologies.com/technical_notes/… plz check this ,It may help you. Commented Oct 16, 2019 at 7:09


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.