cancel
Showing results for 
Search instead for 
Did you mean: 

Images not loading on product View page Magento 2.2.5

Images not loading on product View page Magento 2.2.5

I see the image in back end and on the front end on the product listings, but when I click on the product to look at it in the product details page, all I get is the spinning timer on where the image should be. 

 

I clicked in the spinning timer and looked at the code.

<img src="https://mysite.com/pub/static/version1530909443/frontend/Magento/luma/en_US/images/loader-1.gif" alt="Loading...">

 

I have tried flushing, cleaning, re indexing, re sizing with no results. This is from a fresh install on a2 hosting.com.

 

Everything works fine if I install with sample data.

 

 

 

 

3 REPLIES

Re: Images not loading on product View page Magento 2.2.5

Hi  Agrium

I have to fetch to this type of issue and I have check product details page console and show the error gallery.js some parameters are missing. so please check the theme  module catalog 
product\view\gallery.phtml

check this parameter 

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                "options": {
                    "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
                    <?php if (($block->getVar("gallery/loop"))): ?>
                        "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/keyboard"))): ?>
                        "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/arrows"))): ?>
                        "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
                    <?php endif; ?>
                    "width": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>",
                    "thumbwidth": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_small', 'width') ?>",
                    <?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
                        "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
                    <?php endif; ?>
                    "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
                    <?php if (($block->getVar("gallery/navarrows"))): ?>
                        "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>,
                    <?php endif; ?>
                    "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
                    "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navdir") ?>"
                },
                "fullscreen": {
                    "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
                    <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                        "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>,
                    <?php endif; ?>
                    "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
                    <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                        "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>,
                    <?php endif; ?>
                    "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
                    <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
                        "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
                        "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
                    <?php endif; ?>
                    "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
                },
                "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
            }
        }
    }
</script>

 

I hope its working

 

Thanks

Re: Images not loading on product View page Magento 2.2.5

The file is there and is exactly as what you attached to your reply. I compared yours to what is in my website. No characters missing or mistyped. I copied both codes onto word with same font, then put the pages on a light box, on top of each other to see if anything was missing/not missing. After lining up both pages I could see through both pages.

 

This is where I found the file in Magento:

\vendor\magento\module-catalog\view\frontend\templates\product\view\gallery.phtml (1 hit)

 

Does not look like that was the problem. Still getting the spinning timer, after clicking on the image from the catalog page.

 

Re: Images not loading on product View page Magento 2.2.5

Maybe this might help some one figure it out. I looked at the element/console it shows an error

 

1-lb-1-4-pyramid-polishing-plastic-tumbling-tumbler-tumble-media-v-pre-plate.html:5 Uncaught SyntaxError: Unexpected token P in JSON at position 127

   at JSON.parse (<anonymous>)

   at getData (main.js:58)

   at Array.map (<anonymous>)

   at HTMLDocument.apply (main.js:74)

   at fire (jquery.js:3232)

   at Object.add [as done] (jquery.js:3291)

   at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)

   at jQuery.fn.init (jquery.js:2967)

   at new jQuery.fn.init (jquery-migrate.js:225)

   at jQuery (jquery.js:75)