[React] img elements must have an alt prop… 에러 해결 방법

React에서 img 태그를 사용할 때는 꼭 alt 속성을 추가해야 합니다. 에러 메시지에서는 의미 있는 텍스트나 장식용 이미지의 경우 빈 문자열로 설정해야 한다고 설명하고 있습니다. 따라서 기존 코드에 alt 속성을 추가하여 문제를 해결할 수 있습니다.
Dec 29, 2023
[React] img elements must have an alt prop… 에러 해결 방법

에러 코드

💡
Compiled with warnings.
[eslint] src\chapter_05\Comment.jsx Line 39:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.
WARNING in [eslint] src\chapter_05\Comment.jsx Line 39:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
webpack compiled with 1 warning
 

해결 방법

기존 코드

<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" style={styles.image} />

변경한 코드

<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="profilePicture" style={styles.image} />
 
React를 사용 시 img 태그에는 alt를 꼭 써줘야 한다.
 
Share article

More articles

See more posts

👨🏻‍💻DriedPollack's Blog