我正在使用下一個圖像組件，以適應一個靈活的盒子沒有收縮。但是，根據另一個元素中的內容，它會不斷縮小:

這是我的代碼:

import React from 'react';
import Image from 'next/image';
type Props = {
  imageUrl?: string;
  senderName: string;
  newMessageCount?: number;
  latestMessage: string;
};

export default function MessageBox({
  imageUrl,
  senderName,
  newMessageCount,
  latestMessage,
}: Props) {
  const isNewMessageDefined = newMessageCount ? true : false;
  const newMsgValue =
    latestMessage.length > 80
      ? `${latestMessage.slice(0, 80)}...`
      : latestMessage;
  return (
    <div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
      <Image
        alt='Message Image'
        src={imageUrl ?? '/funfuse/avatar-02.jpg'}
        className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
        height={80}
        width={80}
        objectFit='cover'
        objectPosition='center'
      />
      <div className='flex flex-col'>
        <div
          aria-label='Funfuse-Message-Header'
          className='flex flex-row items-center gap-2'>
          <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
          {isNewMessageDefined && (
            <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
              <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
                {newMessageCount}
              </label>
            </div>
          )}
        </div>
        <div aria-label='Funfuse-Message-Body'>
          <label className='text-sm font-semibold text-gray-400'>
            {newMsgValue}
          </label>
        </div>
      </div>
    </div>
  );
}

有人能幫我確定如何防止這一問題，因為我總是希望我的圖像的大小，永遠不會縮小。我試著使用屬性:flex-shrink: 0，但是也不起作用。

這是另一個在類似情況下對我有效的方法。我把& ltimage/>；位置為:relative的div周圍的組件；寬度:80px高度:80px，刪除了& ltimage/>；組件和添加的布局= & quot填充& quot相反。

所以代替這個

<Image
  alt='Message Image'
  src={imageUrl ?? '/funfuse/avatar-02.jpg'}
  className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
  height={80}
  width={80}
  objectFit='cover'
  objectPosition='center'
/>

你會有這樣的東西

<div className="relative w-[80px] h-[80px]">
 <Image
   alt='Message Image'
   src={imageUrl ?? '/funfuse/avatar-02.jpg'}
   className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
   layout="fill"
   objectFit='cover'
   objectPosition='center'
 />
</div>

這可能是因為默認圖像標簽中的布局屬性是有響應的，當它減小父標簽的寬度時，它減小其大小。

將布局設置為固定，以保持圖像的寬度固定。 在這里你可以閱讀更多關于next/image:https://nextjs.org/docs/api-reference/next/image

return (
<div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
  <Image
    alt='Message Image'
    src={imageUrl ?? '/funfuse/avatar-02.jpg'}
    className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
    height={80}
    layout="fixed"
    width={80}
    objectFit='cover'
    objectPosition='center'
  />
  <div className='flex flex-col'>
    <div
      aria-label='Funfuse-Message-Header'
      className='flex flex-row items-center gap-2'>
      <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
      {isNewMessageDefined && (
        <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
          <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
            {newMessageCount}
          </label>
        </div>
      )}
    </div>
    <div aria-label='Funfuse-Message-Body'>
      <label className='text-sm font-semibold text-gray-400'>
        {newMsgValue}
      </label>
    </div>
  </div>
</div>

);

同意@georgekpc的回答，需要用容器把圖像包起來

從文件上看

父元素必須分配位置:相對& quot，位置: "固定& quot，或位置:& quot絕對& quot風格。

但是，布局屬性現在已被棄用，您需要將填充屬性用作true。

<div className="relative h-[56px] w-[56px]">
      <Image
        className="h-14 w-14 rounded-full"
        src={author.profileImageUrl}
        alt="Profile Image"
        fill={true}
      />
    </div>

https://nextjs . org/docs/pages/API-reference/components/image

https://nextjs . org/docs/pages/API-reference/components/image # fill