https://github.com/mapado/image-url-builder-js
https://github.com/mapado/image-url-builder-js
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mapado/image-url-builder-js
- Owner: mapado
- Created: 2020-09-15T06:52:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-15T07:53:31.000Z (over 2 years ago)
- Last Synced: 2024-03-24T04:02:04.526Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Mapado Image JS Url Builder
## Installation
```sh
npm install "@mapado/image-url-builder"
```
or with yarn:
```sh
yarn add "@mapado/image-url-builder"
```
## Usage
```js
import { buildUrl } from '@mapado/image-url-builder';
const imagePath = '2018/01/foo.jpg';
const fullWidthImage = buildUrl(imagePath);
// will output something like '//img.mapado.net/2018/01/foo.jpg'
```
You can also specify a `width` and a `height` to crop / resize the image:
```js
const width = 400;
const height = 300;
const cropedImage = buildUrl(imagePath, width, height);
// will output something like '//img.mapado.net/2018/01/foo_thumbs/400-300.jpg'
```
If you don't want to resize or apply any filter but want to allow `webp` format for compatible browser, you have two options:
- you can set the option `allowwebp: 1`
- you can set both width and height to `0`
```js
const webpAllowedImage = buildUrl(imagePath, null, null, {allowwebp: 1});
const alsoWebpAllowedImage = buildUrl(imagePath, 0, 0);
// will both output something like '//img.mapado.net/2018/01/foo.jpg_thumbs/0-0.jpg'
```