Do not use <img>. Use Image from 'next/image' instead.
React & styled-components
react와 styled-components를 활용해서
이미지 태그를 다룰 때는 보통 아래와 같이 활용했다.
import styled from 'styled-components';
const Wrapper = styled.div``;
const Imga = styled.img``;
export default function Home() {
return (
<Wrapper>
<Img />
</Wrapper>
);
}
Next.js
export default function Home() {
return (
<div>
<img src="이미지경로" alt="" />
</div>
);
}
위의 코드와 같이 사용하려 하니 아래 사진에 나와 있는 오류가 발생했다.
해결방법
코드에 문제가 없어보이는데 왜 이런 오류가 발생하는지 궁금해서 Next.js공식홈페이지에 들어가 확인해보았다.
Why This Error Occurred
An HTML img element was used to display an image. For better performance and automatic Image Optimization, use Next.js' built-in image component instead.
https://nextjs.org/docs/messages/no-img-element#why-this-error-occurred
더 나은 성능과 이미지 최적화를 위해 Next.js의 built-in image component를 이용하라고 안내되어 있었다. 공식홈페이지에 안내되어 있는 코드대로 작성해주면 이전에 발생한 오류는 해결된다!
import Image from 'next/image'
function Home() {
return (
<>
<Image
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home
Author And Source
이 문제에 관하여(Do not use <img>. Use Image from 'next/image' instead.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@starkdy/Do-not-use-img.-Use-Image-from-nextimage-instead저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)