img-srcx
Tiny JSX helper function for high-DPI (Retina Display) images.
394 bytes minified and gzipped for ESM (830 bytes for ES5).
Installation
npm install --save img-srcx
# or
yarn install img-srcx
# or
pnpm install img-srcx
If you’re using this in older runtimes, such as node 8, Internet Explorer, or Android before 4.4.4, you’ll need to use a URL polyfill. You may find Can I use URL? useful.
Example
import { srcx, type Scale } from "img-srcx";
function MyImageComponent({ src, forceScale }: { src: string; forceScale?: Scale; }) {
return <img {...srcx(src, { forceScale })} />;
}
function Root() {
return (
<div>
<MyImageComponent src="https://repo.chariz.com/CydiaIcon.png" />
<MyImageComponent src="https://www.google.com/google.jpg" forceScale={1} />
<MyImageComponent src="https://github.githubassets.com/favicons/favicon.svg" />
</div>
);
}
ReactDOM.render(
<Root />,
document.getElementById("root")
);
Yields the following rendered HTML:
<div>
<img
src="https://repo.chariz.com/CydiaIcon.png"
srcSet="https://repo.chariz.com/[email protected] 2x,https://repo.chariz.com/[email protected] 3x">
<img
src="https://www.google.com/google.jpg">
<img
src="https://github.githubassets.com/favicons/favicon.svg">
</div>
Usage
srcx(src: string, options?: { scales?: Scale[], forceScale?: Scale }): { src: string; srcSet?: string }
Returns JSX properties for use on an <img> element. The src and srcSet attributes set as appropriate for the given parameters.
- src: The URL of the image to be displayed. Will be passed through exactly as the
srcattribute, unlessforceScaleis set. - options: Optional object with the following properties:
- scales: An array of image scales to use. Defaults to
[1, 2, 3]. The lowest scale will be used as thesrcattribute, and the remainder will be used as thesrcSetattribute, unlessforceScaleis set. - forceScale: The minimum scale to use. If set, the
srcattribute will be set to the URL matching the given scale, and thesrcSetattribute will be set to the remaining scales above the given scale.
- scales: An array of image scales to use. Defaults to
Paths ending in .svg will be returned as-is, without srcSet.
Scale
A type for indicating scale factors. This is defined to 1 | 2 | 3, matching the common scale factors for high-DPI images.
Credits
Developed by Chariz:
License
Licensed under the Apache License, version 2.0. Refer to LICENSE.md.
4 May 3, 2022
14 Jan 3, 2023
6 Dec 21, 2022
587 Dec 30, 2022
8k Dec 29, 2022
10 Aug 3, 2022
11 Dec 18, 2022
21 Jun 20, 2022
14 Dec 8, 2022
19 Dec 19, 2022