#Please convince me that Next Image dx isn't terrible

3 messages · Page 1 of 1 (latest)

sharp jewel
#

I have been using Next Image for several years, have read the documentation several times, and still find its use to be tedious and its dx abysmal. I'm ready to be proven otherwise and have a few questions along the way.

First, let's compare it to simply using <img> using latest Next in app directory:

// Works as expected, no problem at all 
<div className="w-96">
  <img src={images[0] ?? "/images/placeholder.png"} />
</div>

Next Image

  1. Try to be simple like <img>
<div className="w-96">
  <img src={images[0] ?? "/images/placeholder.png"} />
</div>

Result >> Error: Image with src "/images/placeholder.png" is missing required "width" property

  1. Listen to provided Next Error for required width. Provide abstract number
<div className="w-96">
  <Image src={images[0] ?? "/images/placeholder.png"}
  alt="Alt is required by Next Image" 
  width={300}
  />
</div>

Result >> Error: Image with src "/images/placeholder.png" is missing required "height" property

  1. Listen to error for height. What do the width and height numbers do anyways?
<div className="w-96">
  <Image
    src={images[0] ?? "/images/placeholder.png"}
    alt="Alt is required by Next Image"
    width={300}
    height={300}
  />
</div>

Result >> Image with src "/images/placeholder.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

(Alternative) At this point, ask #1089389297548931182. I'll skip the results, but it gives obviously incorrect advice. Abort.

  1. Finally! Still no idea what width and height do to be required.
<div className="w-96">
  <Image
    src={images[0] ?? "/images/placeholder.png"}
    alt="Alt is required by Next Image"
    width={300}
    height={300}
    style={{ width: "auto" }}
  />
</div>

I'd like to hear a discussion and am ready to be persuaded.

mortal compassBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sharp jewel
#

(Ran out of text to also show LCP/priority error. This is just one example, but have found using Image to be tedious in almost every use case I've encountered)