CODEWITHSUNDEEP
windowsgoogle-chrome
zizi
zizi

Reputation: 63

image not display in Chrome Windows

I have a website https://drygon.ca/ , there is a photo "Photo a day" in the homepage, it displays in all the browser and devices except Chrome in Windows. I tried the Chrome in Linux, it works too.

I inspect the element, the hyperlink is there, wonder why it won't display? If I click other tab, then click homepage again it 'll display.

The website is written in reactjs, photo is stored under firebase.

Windows 10, Chrome 59.0.3071.86(64-bit)

Upvotes: 0

Views: 62

Answers (1)

javaBean007
javaBean007

Reputation: 565

The "photo a day" image loads for me in Chrome. I am on Version 58.0.3029.110 (64-bit).

However it takes extremely long for it to load in Chrome vs Firefox(about a solid minute), your issue may be to how large the image is 3648 X 2736(current image). You are reducing the width with CSS however the browser still processes the entire size of the image. Attempt to use a image tool and reduce the actual image to the desired size.

Revised:

After taking a second look at your site, I believe the issue going here is how chrome is handling the CSS rule of flex. The site has the flex rule throughout, particularly on the Photo A Day and it's container with id of #dayphoto. The flex items inside this container(card-header and the day photo) are being made to be the same height, however since the image is being loaded from an absolute path, it isn't added(with it's height) until later. Thus the .card-block container around your image is getting the same height as the .card-header, additionally your image has it's height set to 100% which it inherits from .card-header. Read on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In a nutshell, change the css height on your image to:

#dayphoto img {
    width: 640px;
    height: auto;
    padding: 1rem;
}

The image is actually always there/loaded, you just can't see it!

Upvotes: 1

Related Questions