Images not loading on product View page Magento 2.2.5

[Algrium]

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.

[Kalpesh KIKani]

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

[Algrium]

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.

[Algrium]

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)

[A1Ben]

The issue is caused by quotes in the product titles not being properly escaped in the JSON for the product breadcrumbs.

The fix is described here.  https://github.com/magento/magento2/issues/15037#issuecomment-387145744

The issue is still in Magento 2.5.5. 

https://github.com/magento/magento2/blob/2.2.5/app/code/Magento/Catalog/view/frontend/templates/prod...

[gelanivishal]

Hello @Algrium,

Possible reason 1: You have wrong permissions on your /media/ folder

Solution: Ensure you have writable permissions on this folder. Change permissions to 777 recursively. You can do it using SSH via this command (execute it in Magento directory):

> chmod -R 777 media/

Possible reason 2: Media folder is owned by another user. It can happen if you transfer your Magento store from one server to another

Solution: Change ownership of the /media/ folder:

> chown -R {username}:{username} media/

Important: Make sure that folder owner is the same user as your web server user. If you are not sure, contact your server support administrator.

Possible reason 3: Magento cannot resize images due low PHP memory limit. Magento resize images using GD library, however if there is no sufficient amount of memory for such operation Magento will return a placeholder image

Solution: Increase your memory limit. You should open your .htaccess file and find this string:

php_value memory_limit 256M

Make sure that this value is at least 256M, or better 512M.

Possible reason 4: The GD library is not installed/configured

Solution: Make sure that your hosting installed GD library on your server, you can check it using php info.

Possible reason 5: Wrong attribute scope for small_image, thumbnail, base_image. Sometimes Magento processes images incorrectly, if they have scope=Store View (especially in case of multi-store installation)

Solution: You should open your Magento backend > Catalog > Attributes > Manage attributes. After this you should find image, small_image & thumbnail attributes. Make sure that all these attributes have scope = Global.

Possible reason 6: Problem with safe mode

Solution: It is not recommended to disable safe mode, but if you tried all other solutions you might try to disable safe mode on your server

--
If my answer is useful, please Accept as Solution & give Kudos

[annabarika5d36]

Maybe it's helping for your

https://github.com/magento/magento2/blob/2.2.5/app/code/Magento/Catalog/view/frontend/templates/prod...

After that insert to app/design/frontend/yourtheme/Magento_Catalog/templates/product/view/gallery.phtml

this code to stop spinner loading

<script>
    require(['jquery'], function ($) {
        'use strict';
        $(document).on('fotorama:load', function(e, fotorama, extra){
            if($('.loading-mask').length>0)
                $('.loading-mask').remove();
        });
    });
</script>

[firstchoic1e96]

This website service page image loading issue some time not show any one help me.