Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@blazity/next-image-proxy
Advanced tools
Readme
Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.
This library makes it possible to use next/image
with dynamic domains. If you work with external providers, like Facebook, Instagram, Etsy, Medium, and others, the images often have dynamic subdomains. For example, you might get the first image from scontent-akl1-1.cdninstagram.com
and the second one from scontent-akl3-1.cdninstagram.com
. Although adding them one by one to the config could work temporarily, it would not be reliable since they can change at any time. The whole issue could be resolved by adding a regex pattern to next.config.js
, but unfortunately, Next.js doesn't support that.
If you want to follow the discussion about Next.js supporting it outside of the box, please refer to this Discussion and this Pull Request
You have to remember that there're some cons:
$ npm i --save @blazity/next-image-proxy
# or
$ yarn add @blazity/next-image-proxy
It is really simple to setup, you just need to add a new API route that exports one function. The name of the endpoint is up to you.
// pages/api/imageProxy.ts
import { withImageProxy } from '@blazity/next-image-proxy'
export default withImageProxy({ whitelistedPatterns: [/^https?:\/\/(.*).medium.com/] })
and now you prefix the image you want to use:
import NextImage from 'next/image'
export function SomeComponent() {
const actualImageUrl = 'https://cdn-images-1.medium.com/max/1024/1*xYoAR2XRmoCmC9SONuTb-Q.png'
return <NextImage src={`/api/imageProxy?imageUrl=${actualImageUrl}`} width={700} height={300} />
}
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)FAQs
Next.js image proxy. Makes it possible to use dynamic domains in next/image component.
The npm package @blazity/next-image-proxy receives a total of 293 weekly downloads. As such, @blazity/next-image-proxy popularity was classified as not popular.
We found that @blazity/next-image-proxy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.