How to use Images & Assets in Nuxt | Full-Stack Web Dev #13

Описание: This is Episode #13 of my Nuxt Full-Stack Web Development series.

In this video, we’re focusing on images and assets in Nuxt: how to organize them properly, serve them the right way, and make your app feel more polished.

We cover server vs public assets, setting up and using `NuxtImg`, fixing common image quirks (like layout shifts/jitter), and cleaning up favicons so your project looks “finished” in the browser.

*What’s covered in this video:*
– Server assets vs `/public` assets (what goes where and why)
– Using `NuxtImg` the right way (sizes, placeholders, format, and performance)
– Reducing image layout shift / jitter on load
– Favicons + basic asset housekeeping

By the end, your project’s asset setup will be cleaner and your images will load smoother.

Subscribe to follow along with the rest of the series as we keep refining and expanding the full-stack Nuxt app.

00:00 - Intro + series update
00:26 - Public folder images (serving static assets)
01:24 - robots.txt + favicon setup
01:52 - Adding an image from `/public`
02:23 - `img` + alt text best practices
02:57 - Sizing + Tailwind layout tweaks (aspect-video)
04:04 - `assets/` vs `public/` (private vs public files)
05:12 - Nuxt Image module intro + install
06:14 - Why `NuxtImg` prefers public/remote sources
06:46 - Placeholders + format options (webp)
07:18 - Quality settings + responsiveness
08:54 - `fit` (cover vs contain) + stopping image jitter
10:00 - Preload vs lazy loading (when to use each)