Avoid using the
<img> tag JS-W1015
Anti-pattern
Minor
2 days ago
—
7 months old
Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element 75 {app.name}
76 </Text>
77 )}
78 <img src={app.iconUrl} alt={app.name} className={combineClasses(classes.appIcon, "app-icon")} /> 79 </Flex>
80 </Tooltip.Floating>
81 {options.pingEnabled && app.href ? (Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element 65 <InputBase
66 rightSection={<Combobox.Chevron />}
67 // eslint-disable-next-line @next/next/no-img-element
68 leftSection={previewUrl ? <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} /> : null} 69 value={search}
70 onChange={(event) => {
71 combobox.openDropdown();Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element15 ) : (
16 // we only want to use next/image for logos that we are sure will be preloaded and are allowed
17 // eslint-disable-next-line @next/next/no-img-element
18 <img src={src} alt={alt} width={size} height={size} />19 );
20
21const logoWithTitleSizes = {Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element15 ) : (
16 // we only want to use next/image for logos that we are sure will be preloaded and are allowed
17 // eslint-disable-next-line @next/next/no-img-element
18 <img src={src} alt={alt} width={size} height={size} />19 );
20
21const logoWithTitleSizes = {Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element15 ) : (
16 // we only want to use next/image for logos that we are sure will be preloaded and are allowed
17 // eslint-disable-next-line @next/next/no-img-element
18 <img src={src} alt={alt} width={size} height={size} />19 );
20
21const logoWithTitleSizes = {
Description
It is recommended not to use an <img> tag; instead, use the built-in Image component. Image component is an extension of img element, and it offers the following advantages:
- Handles automatic lazy loading
- Preloading of critical images
- Correct sizing across devices and optimized the image for various viewpoints
- Automatic image optimization
- Automatically serves the image in modern formats like
WebP(30% smaller thanJPEG) - It also allows NextJS to automatically adopt future image formats and serve them to browsers supporting those formats.
- Image optimization works with any image source.
- NextJS optimizes the images on demand when requested by the users instead of optimizing them during the build time.
- Automatically serves the image in modern formats like
- Improved and optimized page performance
- Reduces the size of the image
Bad Practice
function Home() {
return (
<>
<img
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home
Recommended
import Image from 'next/image'
function Home() {
return (
<>
<Image
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home