@nuxt/image
Advanced tools
@nuxt/image is a Nuxt.js module that provides a powerful and flexible way to handle images in your Nuxt applications. It offers features like automatic image optimization, responsive images, and support for various image providers.
Automatic Image Optimization
Automatically optimizes images for better performance. The `nuxt-img` component handles the optimization process, ensuring that images are served in the most efficient format and size.
<template>
<div>
<nuxt-img src="/path/to/image.jpg" width="800" height="600" />
</div>
</template>
Responsive Images
Generates responsive images that adapt to different screen sizes. The `sizes` attribute allows you to specify different widths for the image, ensuring it looks good on all devices.
<template>
<div>
<nuxt-img src="/path/to/image.jpg" :sizes="[320, 640, 1024]" />
</div>
</template>
Support for Various Image Providers
Supports multiple image providers like Cloudinary, Imgix, and more. You can specify the provider using the `provider` attribute, allowing you to leverage the features and optimizations offered by these services.
<template>
<div>
<nuxt-img provider="cloudinary" src="/path/to/image.jpg" />
</div>
</template>
A package for Gatsby.js that provides image optimization and responsive images. It is tailored for Gatsby applications and offers features like lazy loading and image placeholders.
A React component for handling images, offering features like lazy loading and image placeholders. While it doesn't provide as many built-in optimizations as @nuxt/image, it is a flexible solution for React applications.
Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.
<nuxt-img> drop-in replacement for the native <img> element<nuxt-picture> drop-in replacement for the native <picture> element.Note: This branch is for Nuxt 3 compatible module. Checkout v0 branch for Nuxt 2 support. (Announcement)
corepack enablepnpm installpnpm dev:prepare to generate type stubs.pnpm dev to start playground in development mode.Published under the MIT License
v1.8.1
/index (#1467)formats config & improved documentation (#1514)tinyexec internally (3b9a4ea)FAQs
Nuxt Image Module
We found that @nuxt/image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.