How to fix images missing alt on Nuxt.js

Steps for Nuxt.js

1. Audit every `<img>` tag and `<NuxtImg>` / `<NuxtPicture>` component across your pages and components (e.g. `pages/products/[slug].vue`, `components/ProductCard.vue`, `components/HeroBanner.vue`) and ensure each one has a non-empty, descriptive `alt` prop.
2. For product images, derive the `alt` string dynamically from your API/store data — prefer a dedicated `altText` field if the commerce API exposes one (e.g. Shopify Storefront API `image.altText`), otherwise fall back to the product title plus a context hint (e.g. `'${product.title} – front view'`).
3. For decorative images that carry no semantic meaning (spacers, background textures), pass an explicit empty string `alt=""` so screen readers and crawlers correctly skip them — never omit the attribute entirely.
4. Create a reusable `BaseImage.vue` component that enforces the `alt` prop as required (using Vue's `required: true` prop validation). Use this component everywhere instead of raw `<img>` tags so missing alt text causes a console warning during development.
5. If you use `@nuxt/image`, replace all raw `<img>` tags with `<NuxtImg>` and wire the `alt` prop — the module passes it straight through to the rendered `<img>`, so no extra config is needed.
6. Run `nuxi build` (or check the browser console in `nuxi dev`) to catch any prop-validation warnings for missing `alt` values before deploying.

What is images missing alt?

Every `<img>` tag in HTML has an `alt` attribute — a short written description of what the image shows. When an image is missing its alt text (the `alt` attribute is absent or empty), search engines like Google cannot "see" what the image depicts, and screen-reader software used by visually impaired shoppers reads nothing aloud. Writing good alt text means filling in that attribute with a clear, specific description: for a product photo you might write `alt="Red leather crossbody bag with gold buckle clasp"`.

Google explicitly uses alt text to understand images and rank them in Google Images — a significant free-traffic channel for ecommerce stores. Missing alt text means your product photos are invisible to Google's crawler and cannot appear in image search results, cutting off a stream of high-intent shoppers. On the conversion side, assistive-technology users (screen readers) rely on alt text to understand your product imagery; missing it creates a poor shopping experience and in many jurisdictions exposes you to accessibility-law liability (ADA in the US, EN 301 549 in the EU, AODA in Canada). Even a handful of untagged images on key product or landing pages is enough to suppress rankings and fail an accessibility audit.

See the complete Images missing alt guide for every platform and the full background.