react console warning - images jsx-a11y/alt-text

Table of Contents

React 在 Console 中出現以下 Warning:

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

原因

會出現這警告，代表著你實際的 code 可能是如下:

<img src={ImageUrl} />

images jsx-a11y/alt-text 警告，其實只是通知你 img 需要有設有 alt。

加上 alt 即可，如下

<img src={ImageUrl} alt="圖片描述"/>

圖片 alt 雖然主要功能是放這張圖片的描述，但有一個前提，如果你的圖片不具備有意義，比方說他只是 icon、背景，視覺圖，你的描述跟網站內的主題、容毫無相干，那請不要填寫任何文字。

這裡舉個例子，比方說我們畫面有一個加入追蹤的功能，呈現上一個愛心圖片，製作時使用愛心icon，可能你的 code 如下:

<img className="icon" src="img/favorite.svg"/>

以這個例子來看，它只是一個 icon，所以只須加上 alt，裡面不用填寫，如下:

// 建議使用方式
<img className="icon" src="img/favorite.svg" alt=""/>

你可能會有這類的情況，為不具有意義的圖片增設alt

<img className="icon" src="img/favorite.svg" alt="icon-favorte"/>

這類做法邏輯上沒有問題，但實際上，會影響你搜尋引擎呈現的內容，畢竟 alt 也是網頁內容之一。

使用這類做法，最常見的錯誤就是 google 搜尋你時，你可以在搜尋結果的描述中，看到 alt 的說明。

此時對於用戶來說，它看到說明是［icon-favorte 網站說明…］，如果你的網站如logo 的alt 也是 logo-image 這類無意義文字，用戶可能看得的就會是［logo-image icon-favorte 網站說明…］，所以 alt 內容請評估後再填寫，而非一律無腦填寫。