fix: gatsby-plugin-image bug

Author: lnikell

gatsby-browser.js

@@ -2,11 +2,9 @@ import './src/styles/main.css';
 
 // eslint-disable-next-line import/prefer-default-export
 export const onRouteUpdate = ({ location }) => {
-  console.log('on route update');
-
-  // Find all .gatsby-image-wrapper [data-main-image] elements check if they are are already loaded
-  // If yes, add the class 'loaded' to the element
-  // If no, add a listener to the element to add the class 'loaded' when the image is loaded
+  // TODO: Fix of gatsby-plugin-image bug, that prevents images from being displayed
+  // It happens because gatsby does not trigger a function that sets to an element opacity: 1
+  // Bug is very hard to reproduce, it happens only in production builds
 
   const mainImages = document.querySelectorAll('.gatsby-image-wrapper [data-main-image]');
   mainImages.forEach((mainImage) => {

src/styles/global.css

@@ -9,7 +9,6 @@
   }
 }
 
-/* TODO: Fix Gatsby bug with images being hidden,the issue is possible to catch only in production build */
-/* .gatsby-image-wrapper [data-main-image] {
+.gatsby-image-wrapper .loaded[data-main-image] {
   opacity: 1 !important;
-} */
+}