Feature request- Built-in image component

Feature request

Is your feature request related to a problem? Please describe.

Working with images is clearly a complicated job. There are many edge cases to deal with and it get complex over times with all additional formats.

Also, there are a lot of things that can be done (optimisation, display resizing, a11y, etc.

My own “in house” solution were:

• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/assets/GraphCMSAsset.tsx
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/assets/Logo.tsx

They did grow complicated over time and covered the following features:

• Optional link (is the image within a link element?)
  • Caring about security (noopener, etc.)
  • Caring about internal link vs external link (next/link vs a)
• Min/max width/height allowed for this image (i.e: Image in nav/footer shouldn’t be bigger than X for proper display, image in product list should respect ratio but be always 150px width, etc.)
• Handle SVG differently

Some specialised libraries have been created

• https://github.com/twopluszero/next-images
• https://github.com/cyrilwanner/next-optimized-images (doesn’t work since v9.1)

I’d like to know if Next.js intends to build something dedicated to Next.js, such as gatbsy has some gatsby-image

Describe the solution you’d like

A Next.js official built-in or lib for handling images

Describe alternatives you’ve considered

The above mentioned libs.

[KidkArolis]

I have been working on something to solve this for myself that might be of interest: https://github.com/humaans/next-img/. I agree, this is a fairly complicated area when developing sites with Next.js, I hope next-img can be of use to others or provide feedback to a potential native Next.js implementation.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.