리액트에서 img 태그 버그 해결방법 : alt 의 중요성

img elements must have an alt prop, either with meaningful text, or an empty string for decorative i...

 

<img src={url} />

 

위와 같은 형식으로 이미지 태그를 작성 했더니 아래와 같은 오류나 났다.

 

Windows PowerShell
Compiled with warnings.

./src/component/About.js
  Line 17:29:  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.

 

img 요소에는 alt가 무조건 있어야 한다는 설명....! 사실 alt를 작성하지 않는 경우도 많지만, 웹표준에 맞추려 alt에 작성하는게 맞다. 확실히 그냥 자바스크립트가 아닌 프레임워크에서는 표준에 대해 엄격한 규칙이 있음을 다시 깨닫게 된다. 😉

 

<img src={process.env.PUBLIC_URL+'/images/me.png'} alt="profile"/>