Magento – Magento 2 Product Detail Page Image Not Loading

magento2

After upgrading Magento 2,
The products detail page product images are not loading, but the product archive page thumbnails are loading or showing.

I have tried ..

Flushing all caches
granting permissions
esizing images

But nothing seems to work or solve the issue. Screenshot here

Best Answer

I have checked your screenshot.

You have to do the following step ----

At first, you have to check your browser console to see any require js issue.
Give permission pub/media folder sudo chmod 777 -R pub/media/

Let me know if will face any issue.

Related Solutions

Magento – Magento 2 : Image is not showing on product detail page

There are many reasons that could be causing this issue, for ex :

On the Product Information page , In your admin backend, under 'Images', make sure the radio buttons have an image selected for 'Base Image', 'Small Image', 'Thumbnail', and that they aren't 'Excluded'.
Make sure the product images exist under /media/catalog/product/ (relative to your document root)
Make sure the /media directory is in your Apache web server's group. Magento also needs to be able to write to this directory, so you can run this command to set those permissions:

sudo chmod -R 775 /path/to/magento/media

In System->Configuration->General->Web , make sure "Base Media URL" is correct under both "Secure" and "Unsecure"

Magento – Product detail page image not loading on front end

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>

Best Answer

Related Solutions

Magento – Magento 2 : Image is not showing on product detail page

Magento – Product detail page image not loading on front end

Related Topic