
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
@mapbox/appropriate-images-get-url
Advanced tools
Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation
Use in combination with appropriate-images.
After you've generated resized, optimized images with appropriate-images, you'll want to use them in the browser.
In order to do that, you'll need to determine which variant of the image to load — which size, and whether to load the .webp
version or not.
That's what this module is for.
This is how the image configuration used by appropriate-images can be reused in the browser to select the appropriate image to load at runtime.
If you're thinking about using this function in combination with React, check out appropriate-images-react.
npm install @mapbox/appropriate-images-get-url
getAppropriateImageUrl(options)
Uses the image id, image configuration, and width value to figure out the URL of the image variant that should be loaded. Returns a URL for the appropriate image variant that you created with appropriate-images.
The returned URL will account for
webp
.The image variant that is selected will be the narrowest variant that is at least as wide as the available width, or else, if the available width exceeds all sizes, the widest variant.
Type: string
.
Required.
Id of the image to be loaded. Image ids correspond to keys in your appropriate-images configuration.
Type: Object
.
Required.
Your appropriate-images configuration object.
Type number
.
Default: Infinity
.
Not technically required, but you should provide it. This is the width available to the image. This is key to figuring out which size variant to load.
Type number
.
Default: 1.3
.
The ratio at which you want to consider a screen "high resolution".
If the browser judges that the screen is high resolution, according to this ratio, the availableWidth
provided will be multiplied by this ratio when determining which size variant to load.
This means that in a 300px
-wide space but on a Retina screen, the image at least 600px
wide will be loaded.
Type string
.
If provided, this will be prepended to the URL.
const getAppropriateImageUrl = require('@mapbox/appropriate-images-get-url');
const imageConfig = {
bear: {
basename: 'bear.png',
sizes: [{ width: 300 }, { width: 600 }]
},
montaraz: {
basename: 'montaraz.jpg',
sizes: [
{ width: 600, height: 500 },
{ width: 1200, height: 800, crop: 'north' },
{ width: 200, height: 200, crop: 'southeast' },
]
}
};
getAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 280 });
// On a regular-resolution screen: bear-300.png or webp
// On a high-resolution screen: bear-600.png or webp
getAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 550 });
// bear-600.png or webp
getAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 800 });
// bear-600.png or webp
getAppropriateImageUrl({
imageConfig,
imageId: 'montaraz',
width: 400,
imageDirectory: 'img/optimized/'
});
// On a regular-resolution screen: img/optimized/montaraz-600x500.jpg or webp
// On a high-resolution screen: img/optimized/montaraz-1200x800.jpg or webp
1.2.0
FAQs
Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation
The npm package @mapbox/appropriate-images-get-url receives a total of 26 weekly downloads. As such, @mapbox/appropriate-images-get-url popularity was classified as not popular.
We found that @mapbox/appropriate-images-get-url demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 28 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.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.