Product detail page image not loading on front end

Question

Product detail page images are not loading. The pointer is just spinning. I have read lots of threads. Clear cache, reindexed, change permissions.

Finally, I got a problem. but unable to fix it. :-/ I am using Porto theme. When I look at the browser console, I see the following error

Uncaught SyntaxError: Unexpected token, in JSON at position 1699
    at JSON.parse (<anonymous>)
    at getNodeData (scripts.js:87)
    at Array.map (<anonymous>)
    at scripts.js:117
    at HTMLDocument.apply (main.js:70)
    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:241)

Answer 1

Also check if this file in your theme then also change.

module catalog/product\view\gallery.phtml

<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>