使用Next/Image NEXT JS时图像质量丢失

qcuzuvrc  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(178)

我正在使用NextJS13构建一个Web应用程序,突然我看到我的图像质量下降,我不知道为什么或者我错过了什么或者做错了什么
但是当我在浏览器上检查html元素时,我看到了这个

<img alt="product" loading="lazy" decoding="async" data-nimg="fill" sizes="50px" srcset="/_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=16&amp;q=75 16w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=32&amp;q=75 32w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=48&amp;q=75 48w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fsunset.com.py%2Fimg%2Fpattern%2Fgoodride%2F716%2Fgoodride_cr976a_01_l.jpg&amp;w=3840&amp;q=75" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">

当我改变大小=“50px”到250px inssde teh浏览器它的工作,但我不知道为什么和下一步做这atomaticly或我做了什么,这发生或什么我必须配置为避免这一点,我怎么能解决它,为什么这是。
我的图片代码:

<Image
            width={500}
            height={500}
            quality={100}
            src={image}
            alt={name}
            className="absolute object-cover object-center"
          />
rqenqsqc

rqenqsqc1#

我已经解决了使用属性“大小”

<Image
         
            quality={100}
            src={image}
            alt={name}
            className="absolute object-cover object-center"
            sizes="200px"
          />

相关问题