Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
next-images
Advanced tools
![npm](https://img.shields.io/npm/dm/next-images.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/next-images.svg?style=flat-square) ![npm](https://img.shields.io/david/arefaslani/next-images.svg)
The next-images npm package is a plugin for Next.js that allows you to import images in your JavaScript and TypeScript files. It simplifies the process of handling images in a Next.js project by enabling you to import image files directly into your components.
Importing Images
This feature allows you to import image files directly into your JavaScript or TypeScript files. The imported image can then be used as a source in an <img> tag or as a background image in CSS.
import myImage from './myImage.png';
export default function MyComponent() {
return <img src={myImage} alt="My Image" />;
}
Custom Configuration
This feature allows you to customize the configuration of the next-images plugin. You can specify which file extensions to handle and modify the Webpack configuration as needed.
const withImages = require('next-images');
module.exports = withImages({
fileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
webpack(config, options) {
return config;
}
});
The next-optimized-images package is another plugin for Next.js that optimizes images and allows you to import them directly into your components. It provides additional features like image optimization, responsive images, and support for various image formats. Compared to next-images, next-optimized-images offers more advanced image optimization capabilities.
The next-image-loader package is a custom Webpack loader for handling images in Next.js projects. It allows you to import images and provides options for optimizing and transforming them. While it offers similar functionality to next-images, it requires more manual configuration and does not integrate as seamlessly with Next.js.
Import images in Next.js (jpg, jpeg, png, svg, fig, ico, webp, jp2 and avif images by default).
If you also want image minimalization and optimization have a look at next-optimized-images
npm install --save next-images
or
yarn add next-images
Create a next.config.js
in your project
// next.config.js
const withImages = require('next-images')
module.exports = withImages()
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
webpack(config, options) {
return config
}
})
And in your components or pages simply import your images:
export default () => <div>
<img src={require('./my-image.jpg')} />
</div>
or
import img from './my-image.jpg'
export default () => <div>
<img src={img} />
</div>
You can serve remote images by setting assetPrefix option.
Dynamic (runtime) asset prefixes are also supported, you can enable this feature by setting dynamicAssetPrefix to true
.
Example usage:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
assetPrefix: 'https://example.com',
dynamicAssetPrefix: true,
webpack(config, options) {
return config
}
})
Inlines images with sizes below inlineImageLimit to Base64. Default value is 8192.
Example usage:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
inlineImageLimit: 16384,
webpack(config, options) {
return config
}
})
Folders that you want to exclude from the loader. Useful for svg-react-loader
for example.
Example usage:
// next.config.js
const path = require('path');
const withImages = require('next-images')
module.exports = withImages({
exclude: path.resolve(__dirname, 'src/assets/svg'),
webpack(config, options) {
return config
}
})
You have the power to specifiy the file extensions you'd like to pass to this loader configuration. This is helpful for
adding image types that behave similarly, but are not included by default. It's also helpful in the same way that
exclude
is helpful, because you can exclude all SVGs (not just one from a specific folder).
TypeScript Users: If you exclude a file suffix, please note our shipped types declaration file will be incorrect. You'll want to use declaration merging or override dependencies for the same file suffixes as needed.
Please note: If you have issues with a file suffix not included in our default list (["jpg", "jpeg", "png", "svg", "gif", "ico", "webp", "jp2", "avif"]), we won't be able to guarantee bug support.
Example usage:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
fileExtensions: ["jpg", "jpeg", "png", "gif"],
webpack(config, options) {
return config
}
})
You can change the structure of the generated file names by passing the name
option:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
name: "[name].[hash:base64:8].[ext]",
webpack(config, options) {
return config
}
})
The default value is "[name]-[hash].[ext]"
. Documentation for available tokens like [name]
, [hash]
, etc can be found in webpack/loader-utils
By default, file-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
ES Modules are disabled by default. You can enable them by using esModule
config option:
const withImages = require('next-images')
module.exports = withImages({
esModule: true,
webpack(config, options) {
return config
}
})
By enabling ES modules you should change your require statements and get default property out of them:
<img src={require("./img.png").default}>
import statement should be as before.
import img from "./img.png";
Typescript doesn't know how interpret imported images. next-images
package contains definitions for image modules,
you need to add reference to next-images types into a type definition file, e.g. additional.d.ts
, and then reference this from tsconfig.json
.
// additional.d.ts
/// <reference types="next-images" />
// tsconfig.json
{
...
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
...
}
See the Next.js docs for more information.
next/image
Base4/Data URL encoding is not supported when using the next/image
component for image optimization. To deactivate inline images you can set the inlineImageLimit
to false
:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
inlineImageLimit: false
})
Try out some of these awesome NextJS dashboard templates developed by Creative Team and support this project indirectly :)
https://www.creative-tim.com/product/nextjs-argon-dashboard-pro/?ref=next-images
https://www.creative-tim.com/product/nextjs-material-kit-pro/?ref=next-images
https://www.creative-tim.com/product/nextjs-material-kit/?ref=next-images
FAQs
![npm](https://img.shields.io/npm/dm/next-images.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/next-images.svg?style=flat-square) ![npm](https://img.shields.io/david/arefaslani/next-images.svg)
The npm package next-images receives a total of 108,569 weekly downloads. As such, next-images popularity was classified as popular.
We found that next-images demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.