<img>
tag JS-W1015<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 ? (
<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();
<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 = {
<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 = {
<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 = {
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:
WebP
(30% smaller than JPEG
)function Home() {
return (
<>
<img
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home
import Image from 'next/image'
function Home() {
return (
<>
<Image
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home