Weird Image behavior

Answered

jsoneaday posted this in #help-forum

2024-06-30T01:04:08.272Z

I have this code for my Image tag.

<Image
      src={`/api/work/image/${id}/main`}
      alt="Description"
      objectFit="contain"
      layout="fill"
    />

And I have a div parent set to 100px. As the screenshot shows the asian girl pic is displaying with two distinct dimensions. I've confirmed I only have one image of that. What is the issue?

Answered by jsoneaday

I ended up switching to this

<Image
      src={`/api/work/image/${id}/main`}
      className="rounded-xl"
      alt="Description"
      width={300}
      height={300}
    />

and then wrapping it inside a parent

<div style={{ width: "300px", height: "auto" }}>
          <WorkImage id={work.id} />
        </div>

View full answer

2 Replies

@jsoneaday I have this code for my Image tag. jsx <Image src={`/api/work/image/${id}/main`} alt="Description" objectFit="contain" layout="fill" /> And I have a div parent set to 100px. As the screenshot shows the asian girl pic is displaying with two distinct dimensions. I've confirmed I only have one image of that. What is the issue?

B33fb0n3

2024-06-30T06:53:10.522Z

Can you create a minimal repro repo? For example via jsfiddle or https://codesandbox.io/ ?

jsoneadayOP

2024-06-30T14:30:12.263Z

I ended up switching to this

<Image
      src={`/api/work/image/${id}/main`}
      className="rounded-xl"
      alt="Description"
      width={300}
      height={300}
    />

and then wrapping it inside a parent

<div style={{ width: "300px", height: "auto" }}>
          <WorkImage id={work.id} />
        </div>

Answer