Installations
npm install loader-probe-image-sizeDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
10.16.3
NPM Version
6.9.0
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (95.07%)
JavaScript (4.93%)
Developer
AvalonCV
Download Statistics
Total Downloads
1,199
Last Day
1
Last Week
2
Last Month
3
Last Year
140
GitHub Statistics
1 Stars
8 Commits
2 Watching
16 Branches
1 Contributors
Maintainers
Package Meta Information
Latest Version
1.0.5
Package Id
loader-probe-image-size@1.0.5
Unpacked Size
7.02 kB
Size
2.94 kB
File Count
3
NPM Version
6.9.0
Node Version
10.16.3
Total Downloads
Cumulative downloads
Total Downloads
1,199
Last day
0%
1
Compared to previous day
Last week
0%
2
Compared to previous week
Last month
-85.7%
3
Compared to previous month
Last year
-11.9%
140
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Webpack image loader with additional size information
This loader uses probe-image-size. While there are already a few other webpack loaders out there that will additionally fetch images sizes - some did not seem very active to me. some had problems loading guetzli-fied JPEGs, etc.
So with all the best intentions - here is yet another loader.
Why?
There are certain use cases where it is beneficial to know the dimensions of the image you (or your page) is about to show.
- an image album (e.g. a bit like masonry)
- using images without a page re-render when loading is done (usually a page 'jumps' when the actua image is shown - moving content further down the page as more images load. If you know their sizes you are able to reserve space in the layout and offer a slightly better UX)
- .. even more
Similar Projects
- https://www.npmjs.com/package/probe-image-size-loader
- https://github.com/boopathi/image-size-loader
- https://github.com/tremby/image-dimensions-loader
- https://github.com/dashed/sizeof-loader
Usage
Installation
1npm install --save-dev loader-probe-image-size
Configuration
Add the loader to your webpack configuration (or replace your existing image loader)
1// webpack.config.[ts|js] 2// ... 3 module: { 4 loaders: [ 5 { 6 test: /\.(gif|jpe?g|png|svg|webp|ico)$/, 7 use: [{ 8 loader: 'loader-probe-image-size', 9 options: { 10 context: path.resolve(__dirname, 'src') 11 } 12 } 13 ] 14 } 15 ] 16 } 17// ...
Advanced usage The loader uses the interpolatename function from loader-utils - meaning you can modify the filename of the emitted file via options: {name: ...} .
The following tokens are replaced in the name parameter:
[ext]the extension of the resource[name]the basename of the resource[path]the path of the resource relative to thecontextquery parameter or option.[folder]the folder the resource is in.[emoji]a random emoji representation ofoptions.content[emoji:<length>]same as above, but with a customizable number of emojis[contenthash]the hash ofoptions.content(Buffer) (by default it's the hex digest of the md5 hash)[<hashType>:contenthash:<digestType>:<length>]optionally one can configure- other
hashTypes, i. e.sha1,md5,sha256,sha512 - other
digestTypes, i. e.hex,base26,base32,base36,base49,base52,base58,base62,base64 - and
lengththe length in chars
- other
[hash]the hash ofoptions.content(Buffer) (by default it's the hex digest of the md5 hash)[<hashType>:hash:<digestType>:<length>]optionally one can configure- other
hashTypes, i. e.sha1,md5,sha256,sha512 - other
digestTypes, i. e.hex,base26,base32,base36,base49,base52,base58,base62,base64 - and
lengththe length in chars
- other
[N]the N-th match obtained from matching the current file name againstoptions.regExp
Shamelessly stolen from / source: https://github.com/webpack/loader-utils#interpolatename
Usage
Import images from within your code
1import image from './myimagefile.jpeg'; 2 3// => emits myimagefile.jpeg 4// => image is an object { 5// src: string, 6// height: number 7// width: number 8// type: [svg|webp|jpeg|png|...] 9// toString: () => string ... 10// }
Usage with TypeScript
And for those fancy typescript users - you might want to add additional info to your image modules, e.g. /src/@types/images.d.ts, so your IDE of choice will assist you a bit more.
1declare module '*.jpg' { 2 export const src: string; 3 export const type: string; 4 export const width: number; 5 export const height: number; 6}
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/8 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
62 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.3
/10
Last Scanned on 2024-12-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More