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.

 

 

 

 

7 REPLIES 7

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)

Re: Images not loading on product View page Magento 2.2.5

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

Re: Images not loading on product View page Magento 2.2.5

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

Re: Images not loading on product View page Magento 2.2.5

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>

Re: Images not loading on product View page Magento 2.2.5

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