Make full-page-image-view work with next/image

[TechedLemur]

Here is a way to use the Image component from next/image with images of unknown sizes.

As mentioned in the docs, images with fill=true is by default set to position:absolute, so the parent element needs to have either relative, absolute or fixed positioning (since elements with position:static are ignored by absolutely positioned elements).

If you are interested, this is the styling that Next applies to the image:

element.style {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: transparent;
}

The simplest solution I found was to give the parent div position:relative and give it 100% width and height with the size-full tailwind class.

One subtle difference between my solution and the existing one is that the parent div now covers the "empty" area outside the image (if the image ratio is not perfect for the screen size, that is), whereas the in current implementation the div will be the same size as the image. There is no visual difference, you only see it when inspecting the elements, or if you give the div a background color. (I also gave the image priority=true to get rid of console warnings. This will preload the images.)

PS: The tutorial was really nice 👍🏻

[vercel[bot]]

@TechedLemur is attempting to deploy a commit to the t3-oss Team on Vercel.

A member of the Team first needs to authorize it.

[bastiendmt]

Hi @TechedLemur ! While implementing this page, I checked the pull request to see if someone found a fix for the img tag. You PR works great within the modal but the image doesn't show in the full page 🫤

[TechedLemur]

Hi @TechedLemur ! While implementing this page, I checked the pull request to see if someone found a fix for the img tag. You PR works great within the modal but the image doesn't show in the full page 🫤

Strange, it seems to work fine for me...

Here is a screenshot from the modal:

And here is the full page:

The same React component is used in the modal and the full page, so I don't know why is is not working for you...

[bastiendmt]

@TechedLemur My bad, I have tested again and it works. I must have done something wrong previously 🤦‍♂️

I'm applying this change in my repo, Thanks !

[THEALIFHAKER1]

@bastiendmt hey i also experience issue same as you do you know the solution?

[bastiendmt]

@bastiendmt hey i also experience issue same as you do you know the solution?

I'm not really sure how my issue got resolved but the next day it was ok. It should be a cache thing, maybe try to restart your server

[THEALIFHAKER1]

@bastiendmt hey i also experience issue same as you do you know the solution?

I'm not really sure how my issue got resolved but the next day it was ok. It should be a cache thing, maybe try to restart your server

yup can comfirm it a cache problem it just suddenly work after 5 hour later