1

I am trying to display list images that have a fixed width and use the original height of the image that is 100%. Similar question here with no answer.

I have read these answers here and tried them out. The images are there in the dom but out of the screen and does not show up.

The size of images varies eg. 1280x15141, 1280x14333. This is what I am trying to do from the docs example.

    <main className="mx-auto max-w-7xl ">
      <section className="flex flex-col">
        {chapter.images.map((img) => (
          <div key={img} style={{ position: 'relative', width: '768px', height: '100%' }}>
            <Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
          </div>
        ))}
      </section>
    </main>

This ends up displaying no image but they are present in the dom.

noimage

Update: As per suggestion I have added height.


      <section className="flex flex-col">
        {chapter.images.map((img) => (
          <div key={img} style={{ position: 'relative', width: '768px', height: '100px' }}>
            <Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
          </div>
        ))}
      </section>

pic

Plain img tag approach. But if i use the images in <img> instead. I am able to see the image and apply width to it with the height as the default.

      <section className="flex flex-col gap-2">
        {chapter.images.map((img) => (
          <div key={img} className="mx-auto md:w-4/5">
            <img alt="Mountains" src={img} />
          </div>
        ))}
      </section>

But I want to use NextJs Image. How can I do that?

wick3d
  • 1,164
  • 14
  • 41
  • 1
    It looks like the images have 0px height. Try setting some height on the container element, or use a fixed height rather than `100%`. – stickyuser Jun 27 '22 at 13:06
  • With height I am able to see the image, but they are small. I have updated the question. – wick3d Jun 27 '22 at 13:11
  • Does this answer your question: [NextJS Image component with fixed witdth and auto height](https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height)? – juliomalves Sep 06 '22 at 08:34
  • I have found a solution using` next/future/Image` and without it. – wick3d Sep 08 '22 at 12:42

1 Answers1

0

I believe you're import path is incorrect

import mountains from '../../public/mountains.jpg'
Jackie Santana
  • 1,290
  • 14
  • 15
  • 1
    Images are `urls` not static import. – wick3d Jun 26 '22 at 21:52
  • If nothing is wrong with the path then probably try changing your css positions or adding a z-index of 1 or 2 to your image element. That could potentially also be a possibility of why things appear in the dom but are not visual. – Jackie Santana Jun 26 '22 at 21:59
  • I have tried it, still cant see the image – wick3d Jun 27 '22 at 12:52
  • if possible, can you re simulate the code on stackblitz.com or share with me you're github so I can run it on my local and test. – Jackie Santana Jun 27 '22 at 15:21
  • Hi, just to update. I have found a workaround for this usings NextJs `12.2` `` which is still in experimental. That accepts fixed width and no height. Its not a final fix but works for now. – wick3d Jul 03 '22 at 07:42