Product Image does not load on product page

Question

I am having an issue with products images in Magento 2. The products were brought in from a Magento 1.7 install using the data migration tool. I then copied the media/catalog folder from the M1 install to the M2 install.

It appears that everything is working correctly: the product images show up in the Admin tool, and all of the products have thumbnails in the category listings. But when I click through to the product page, Magento 2 loads the default placeholder.

Even when I upload a new image and set it as the base, it does not appear on the product detail page.

I ran find ./pub/media -type d -exec chmod 777 {} \; and find ./pub/media/catalog -type f -exec chmod 777 {} \; to make sure it wasn't a permission issue, but I still can't get the product image to load.

I'm not sure how to debug this further, since it loads a placeholder I can't see what it is trying to load instead of the proper image.

Why isn't my product image loading?

Answer 1

We should run the catalog images command: php bin/magento catalog:images:resize.

Situations where this could be necessary might be:

• After you import products, which might have images of various sizes
  
• If images were resized or deleted manually from cache

Each image assigned to a product must be resized in accordance with image metadata defined in a module’s view.xml configuration file. After resizing an image, its resized copy is stored in the cache (/pub/media/catalog/product/cache directory). Magento serves storefront images from cache.

Source and more information here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-images.html#resize-catalog-images

Answer 2

I believe I have it figured out. The way the image attributes were imported from Magento 1 confused me.

Screenshot of my product images tab:

Even though it looks like this product has an image in that first row, its actually the second row that matters. The first row is the gallery attribute, and the second is the image attribute.

Uploading an image to either attribute adds the image to both, which is why it was confusing. Disabling the "hidden" checkbox on the image in the second row fixed it.