이 경고 메시지는 무엇을 의미합니까?'img 요소에는 의미 있는 텍스트가 포함된 alt 소품이나 장식 이미지용 빈 문자열이 있어야 합니다.'

이 경고 메시지는 무엇을 의미합니까?'img 요소에는 의미 있는 텍스트가 포함된 alt 소품이나 장식 이미지용 빈 문자열이 있어야 합니다.'

왜 이런 경고가 뜨죠?

경고: img 요소에는 의미 있는 텍스트가 포함된 alt 소품 또는 장식 이미지 jsx-a11y/img-has-alt의 빈 문자열이 있어야 합니다.

13번 라인이 나오는데 소품이 없어요.

즉, HTML에서 이미지를 작성할 때,alt화면 리더와 텍스트 브라우저의 이점을 위해 속성을 지정합니다.

<img src="url" alt="description of image">

이미지에는 alt 속성이 있어야 합니다.카드가 다운로드되지 않거나 브라우저가 호환되지 않거나 이미지가 손상되는 등의 경우에 대체 속성이 표시됩니다.alt라는 소품을 이미지에 전달해야 합니다.

또한 Alt 태그는 시각장애인을 위해 화면 리더에서 사용합니다.따라서 이미지 구성 요소에 항상 ALT 태그를 추가하는 것이 좋습니다.접근성

그 말은 즉,<img>태그에는 다음이 필요합니다.alt다음과 같은 속성을 부여합니다.

<img src="pathToYourImage.extension" alt="My Awesome Image">

이미지가 로딩되지 않은 경우 내부 텍스트는alt대신 속성이 표시됩니다.

저도 같은 실수를 했어요.기본적으로 이 단어들은 에 포함시키지 마십시오.alt기여하다. image or picture, or photo

// avoid using image or picture, or photo


// do
<img src="foo" alt="nice"/>.      // good


// don't
<img src="foo" alt="foo is coming "/>.    // bad

이미지에 설명이 필요하며, 이는 alt라는 img 태그의 속성이므로 JSX & React에 쓰는 한 이 속성을 사용합니다.

<img src={ImageImported} alt="description of image"/>

이 코드에서도 비슷한 오류가 발생했습니다.

    <img src={props.contacts.imgUrl}/>

솔루션:커브된 괄호 바깥쪽에 있는 영상 앵커에서 alt= 위치를 확인합니다.

    <img src={props.contacts.imgUrl} alt=""/>

이 오류는 "alt" 속성을 추가하지 않았음을 의미합니다.이 속성은 필수이므로 무시할 수 없습니다.

이 오류를 제거하려면 alt 속성을 설정하고 텍스트를 전달해야 합니다.당신 사진에 대한 설명과 같아요.이 텍스트는 사진이 로드되지 않았거나 브라우저가 제공된 경로(src 속성)로 이미지를 찾을 수 없는 경우에 사용됩니다.

<img src="path_to_your_image" alt="alternative_text_of_your_image"/>

alt 속성에 이미지 또는 이미지를 넣지 마십시오. 이러한 단어는 반응용으로 예약되어 있습니다.

이것을 사용해 보세요.

<input type="image" img src = {'url'} alt="photo" />

(url에 작은 따옴표를 사용하지 않았습니다.)

React에서 ESLint를 사용할 때 다음과 같은 오류가 발생했습니다.

<img src={frontDefault} />

추가

alt=''

이런 식으로 작동해야 합니다.

<img src={frontDefault} alt='' />

저의 경우, 이 에러는 RECT 내부에 있으며, <img src="RedLed" } style="width:'50px'}/> 이 에러로 인해 발생하였습니다.오류는 img 콜 주위에 두 개의 브레이스를 붙였는데, 이와 같은 브레이스(<img src={RedLed} style=twidth:'50px'}/>)가 필요했던 것입니다.

이 요소에는 alt 속성이 포함되어 이미지에 대체 텍스트가 포함되지 않습니다.

언급URL : https://stackoverflow.com/questions/43812733/what-does-this-warning-message-mean-img-elements-must-have-an-alt-prop-either