2

In a custom theme, my image isn't displaying on my product page.

However, if I look in my source code, the image is indeed loaded.

But the image is displayed on the category list item.

Maybe it's because of this view.xml that I've found I don't remember where :

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            <image id="category_page_grid" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="category_page_grid-1" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="category_page_list" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="customer_account_my_tags_tag_view" type="small_image">
                <width>100</width>
                <height>100</height>
            </image>
            <image id="customer_account_product_review_page" type="image">
                <width>285</width>
                <height>285</height>
            </image>
            <image id="customer_shared_wishlist" type="small_image">
                <width>113</width>
                <height>113</height>
            </image>
            <image id="gift_messages_checkout_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="gift_messages_checkout_thumbnail" type="thumbnail">
                <width>100</width>
                <height>100</height>
            </image>
            <image id="mini_cart_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="new_products_content_widget_grid" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="new_products_content_widget_list" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="new_products_images_only_widget" type="small_image">
                <width>78</width>
                <height>78</height>
            </image>
            <image id="product_base_image" type="image">
                <width>265</width>
                <height>265</height>
            </image>
            <image id="product_comparison_list" type="small_image">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_large_no_frame" type="image">
                <frame>false</frame>
            </image>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_image_medium_no_frame" type="image">
                <width>700</width>
                <height>700</height>
                <frame>false</frame>
            </image>
            <image id="product_page_image_small" type="thumbnail">
                <width>88</width>
                <height>110</height>
            </image>
            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_main_image_default" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_more_views" type="thumbnail">
                <width>88</width>
                <height>110</height>
            </image>
            <image id="product_stock_alert_email_product_image" type="small_image">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="product_small_image" type="small_image">
                <width>135</width>
                <height>135</height>
            </image>
            <image id="product_thumbnail_image" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="recently_compared_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="recently_compared_products_images_names_widget" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="recently_compared_products_images_only_widget" type="thumbnail">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="recently_compared_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="recently_viewed_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="recently_viewed_products_images_names_widget" type="small_image">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="recently_viewed_products_images_only_widget" type="small_image">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="recently_viewed_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="related_products_list" type="small_image">
                <width>152</width>
                <height>190</height>
            </image>
            <image id="review_page_product_image" type="small_image">
                <width>285</width>
                <height>285</height>
            </image>
            <image id="rss_thumbnail" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="sendfriend_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="shared_wishlist_email" type="small_image">
                <width>135</width>
                <height>135</height>
            </image>
            <image id="side_column_widget_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="upsell_products_list" type="small_image">
                <width>152</width>
                <height>190</height>
            </image>
            <image id="wishlist_sidebar_block" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="wishlist_small_image" type="small_image">
                <width>113</width>
                <height>113</height>
            </image>
            <image id="wishlist_thumbnail" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
        </images>
    </media>
    <vars module="Magento_Catalog">

        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">
            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="transition">
                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
            </var>
            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navarrows">false</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
                <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                </var>
            </var>
        </var>

        <var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
            <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
        </var>

        <var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="nav">dots</var>
                    </var>
                </var>
            </var>
        </var>
        <!-- end. Gallery and magnifier theme settings -->

        <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
        <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
        <var name="product_base_image_icon_size">48</var>       <!-- Base product image icon size -->

        <var name="product_list_image_size">166</var>           <!-- New Product image size used in product list -->
        <var name="product_zoom_image_size">370</var>           <!-- New Product image size used for zooming -->

        <var name="product_image_white_borders">0</var>
    </vars>
    <vars module="Magento_Bundle">
        <var name="product_summary_image_size">58</var>         <!-- New Product image size used for summary block-->
    </vars>

    <vars module="Magento_ConfigurableProduct">
        <var name="gallery_switch_strategy">prepend</var>
    </vars>

    <vars module="Js_Bundle">
        <var name="bundle_size">1MB</var>
    </vars>
    <exclude>
        <item type="file">Lib::jquery/jquery.min.js</item>
        <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
        <item type="file">Lib::jquery/jquery.ba-hashchange.min.js</item>
        <item type="file">Lib::jquery/jquery.details.js</item>
        <item type="file">Lib::jquery/jquery.details.min.js</item>
        <item type="file">Lib::jquery/jquery.hoverIntent.js</item>
        <item type="file">Lib::jquery/colorpicker/js/colorpicker.js</item>
        <item type="file">Lib::requirejs/require.js</item>
        <item type="file">Lib::requirejs/text.js</item>
        <item type="file">Lib::date-format-normalizer.js</item>
        <item type="file">Lib::legacy-build.min.js</item>
        <item type="file">Lib::mage/captcha.js</item>
        <item type="file">Lib::mage/dropdown_old.js</item>
        <item type="file">Lib::mage/list.js</item>
        <item type="file">Lib::mage/loader_old.js</item>
        <item type="file">Lib::mage/webapi.js</item>
        <item type="file">Lib::mage/zoom.js</item>
        <item type="file">Lib::mage/translate-inline-vde.js</item>
        <item type="file">Lib::mage/requirejs/mixins.js</item>
        <item type="file">Lib::mage/requirejs/static.js</item>
        <item type="file">Magento_Customer::js/zxcvbn.js</item>
        <item type="file">Magento_Catalog::js/zoom.js</item>
        <item type="file">Magento_Ui::js/lib/step-wizard.js</item>
        <item type="file">Magento_Ui::js/form/element/ui-select.js</item>
        <item type="file">Magento_Ui::js/form/element/file-uploader.js</item>
        <item type="file">Magento_Ui::js/form/components/insert.js</item>
        <item type="file">Magento_Ui::js/form/components/insert-listing.js</item>
        <item type="directory">Magento_Ui::js/timeline</item>
        <item type="directory">Magento_Ui::js/grid</item>
        <item type="directory">Magento_Ui::js/dynamic-rows</item>
        <item type="directory">Magento_Ui::templates/timeline</item>
        <item type="directory">Magento_Ui::templates/grid</item>
        <item type="directory">Magento_Ui::templates/dynamic-rows</item>
        <item type="directory">Magento_Swagger::swagger-ui</item>
        <item type="directory">Lib::modernizr</item>
        <item type="directory">Lib::tiny_mce</item>
        <item type="directory">Lib::varien</item>
        <item type="directory">Lib::jquery/editableMultiselect</item>
        <item type="directory">Lib::jquery/jstree</item>
        <item type="directory">Lib::jquery/fileUploader</item>
        <item type="directory">Lib::css</item>
        <item type="directory">Lib::lib</item>
        <item type="directory">Lib::extjs</item>
        <item type="directory">Lib::prototype</item>
        <item type="directory">Lib::scriptaculous</item>
        <item type="directory">Lib::less</item>
        <item type="directory">Lib::mage/adminhtml</item>
        <item type="directory">Lib::mage/backend</item>
    </exclude>
</view>

Note : already cleared and flushed the cache

  • Please check my answer. @MorganTartreau – Rohan Hapani Jun 27 '18 at 19:34
2

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

Thank you.

  • My problem has been solved by "Possible reason 5". Thanks. You are the only one that suggested it. – Hassan Al-Jeshi Jan 22 at 10:47
  • #5 resolved my issue too! Thanks. – Freshwebs Oct 2 at 9:37
0

In my case the generated html didn't contain most of the json options, which caused the faulty behavior. Edit gallery.phtml and replace all $block->getVar("something") with $block->getVar("something", "Magento_Catalog").

0

try run resize image command:

php bin/magento catalog:image:resize

That will resize your image and make it can load on frontend

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.