eslint-plugin-jsx-a11y "img elements must have an alt prop" in CI

The jsx-a11y/alt-text rule flags any <img> (and Image components you configure) that has no alt prop. It fails ESLint, which fails the lint step, before the code ever renders.

What this error means

ESLint reports "img elements must have an alt prop, either with meaningful text, or an empty string for decorative images (jsx-a11y/alt-text)" with the file and line, and the lint step exits non-zero.

/src/components/Hero.jsx
  12:7  error  img elements must have an alt prop, either with meaningful text,
               or an empty string for decorative images  jsx-a11y/alt-text

x 1 problem (1 error, 0 warnings)

Common causes

An img was written without an alt prop

The JSX renders <img src=... /> with no alt, which the rule flags regardless of runtime behavior.

A custom image component is not configured

If the rule is set to also check a framework Image component, using it without alt fails until you either add alt or map the component in the rule options.

How to fix it

Add alt (empty for decorative)

1. Add meaningful alt text for informative images.
2. Use alt="" for purely decorative images.
3. Re-run ESLint to confirm the rule passes.

<img src="/hero.png" alt="Product dashboard overview" />
<img src="/wave.svg" alt="" />

Configure custom image components

Tell the rule which components to treat as images so their alt requirement is enforced too.

// .eslintrc
"jsx-a11y/alt-text": ["error", { "elements": ["img"], "img": ["Image"] }]

How to prevent it

• Keep jsx-a11y/alt-text at error so missing alt fails lint.
• Map framework image components into the rule options.
• Use empty alt for decorative images intentionally.

Related guides