Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
uploadcare-nextjs-loader1
Advanced tools
Uploadcare custom loader (and more) for Next.js
!!! Please note the project is in active development and it's not ready for production just yet.
Look at the demo here.
Preview it on StackBlitz:
Next.js supports custom image loaders starting from 10.0.5.
yarn add nextjs-loader
Inform Next that you're going to use a custom image loader through next.config.js
:
// next.config.js
module.exports = {
images: {
loader: "custom"
}
}
Add your public Uploadcare key to your .env*
config file. You can copy it from Dashboard -> API Keys -> Public key.
#.env
NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY="YOUR_PUBLIC_KEY"
Alternatively, in case you're using a custom proxy, set the proxy domain.
#.env
NEXT_PUBLIC_UPLOADCARE_CUSTOM_PROXY_DOMAIN="proxy.example.com"
That's it. You may now use nextjs-loader
in your project (see Usage).
Below are additional optional parameters which you may not need:
#.env
# A comma-separated list of transformation parameters. Default: format/auto, stretch/off, progressive/yes
NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS="format/auto, stretch/off, progressive/yes"
# Uploadcare CDN domain. Default: ucarecdn.com
NEXT_PUBLIC_UPLOADCARE_CUSTOM_CDN_DOMAIN="cdn.example.com"
Please note
NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS
override corresponding default parameters and keep others in place.
Option 1. Use the UploadcareImage
component and leave us the reset ;)
import UploadcareImage from 'nextjs-loader';
<UploadcareImage
alt="A test image"
src="https://your-domain/image.jpg"
width="400"
height="300"
quality="80"
/>
The UploadcareImage
component supports the same parameters as the Next Image
component.
Option 2. Pass uploadcareLoader
to the Image
component:
import Image from 'next/image';
import { uploadcareLoader } from 'nextjs-loader';
<Image
alt="A test image"
src="https://your-domain/image.jpg"
width="400"
height="300"
quality="80"
loader={uploadcareLoader}
/>
Option 3. Use next-image-loader project to enable Uploadcare image loader for all images by default
In that case, you may not need the loader: "custom"
setting in your next.config.js
.
Install the next-image-loader plugin and enable it as described in its README.
Create image-loader.config.js
in the project root (in the same directory as next.config.js
)
and add this code to it:
// image-loader.config.js
import { imageLoader } from 'next-image-loader/build/image-loader';
import { uploadcareLoader } from 'nextjs-loader';
imageLoader.loader = uploadcareLoader;
Image
as usual, with Uploadcare loader enabled implicitly:import Image from 'next/image';
<Image
alt="A test image"
src="https://your-domain/image.jpg"
width="400"
height="300"
quality="80"
/>
Please note that you can still use any other loader for a separate image like this:
import Image from 'next/image';
import anotherLoader from '[another-loader-project-name]';
<Image
alt="A test image"
src="https://your-domain/image.jpg"
width="400"
height="300"
quality="80"
loader={anotherLoader}
/>
where anotherLoader
will be used instead of the Uploadcare loader for this particular image.
Issue 1: Console warning like this:
Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead. Read more: https://nextjs.org/docs/messages/next-image-missing-loader-width
Next checks whether the image url which loader generates has the exact value which user passed through the width
property of the Image
component. And because the Uploadcare loader doesn't process SVG and GIF images, it just returns the same src
value without adding any transformation parameters to it (including width
). That's why Next reports the console warning.
Fix: Ignore the warning for now.
0.1.0 (2021-10-28)
FAQs
Uploadcare custom loader (and more) for Next.js
The npm package uploadcare-nextjs-loader1 receives a total of 0 weekly downloads. As such, uploadcare-nextjs-loader1 popularity was classified as not popular.
We found that uploadcare-nextjs-loader1 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.