{"_id":"vue-imgix","_rev":"52-05500227d920cb3d547a38affd4fb83d","name":"vue-imgix","dist-tags":{"beta":"2.8.0-beta.4","next":"3.0.0-rc.5","latest":"2.9.1"},"versions":{"0.0.0":{"name":"vue-imgix","version":"0.0.0","author":{"name":"Frederick Fogerty"},"license":"MIT","_id":"vue-imgix@0.0.0","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"}],"dist":{"shasum":"825ea848a579fd20c8c19b17933ad97cff3bdd16","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-0.0.0.tgz","fileCount":1,"integrity":"sha512-axl4vj+J+IpwmPHLLOVLnka7C7223qU2VBf7HJiAf5wYIaI4qBoanrhhrNkjPHTVF7WglSPBsEpPIaZDPND9JQ==","signatures":[{"sig":"MEUCIQDUMm4sxYNzfpqQS2GI5IywTfcBYBxhkRyABChBPekP4wIgOKy869ee9pF4rI0LmTcXVhULw/LNsIYDS0FbH5pCXLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMuwCRA9TVsSAnZWagAAJP8P/j+yqBhp/7+rBoMX9WL9\nbizH+jQELW0joHqpf6CfJhP8mepacAaee4I18ngg/8Ut7f8/nJXrjuSACVxk\nVMyFREVGlQxWpS2+SBNQxRC0epNDEujPob6KB+k8XOImPvHOO1uxIdAMlrD8\nGKpA8ekHUUJMEVvavVBoo+/vE6ci5FagITg7IsQiRET843hdPHTB78O8q2S+\nrSlN2yakqlv9ZjrebHCMHqDMKK0vEUSLv09oNkbtVN5JAhD4SVSGyQ0CUYT/\nItXTzfy0BYHkHDGiLnuXuuXJQWWTPBmToD4KHyfSSGPr7J8/4eGixURSrqMh\nirt3xtvK2bLBtVRvvz69XDmPg3fAQtOu3E4y2Bau85Qy0sX8Mv2K1j2nBBEJ\npChyHBe1bF2VAoAzAd/ERwfGaCIoiOU72Cj7hPkPxX+DvjJS6+CYZAS+f4Ij\niXna37jjex/r2XYbjLFLLarWqvbaHxynd6Djkofi6dtL7qEjCLNRuQLxCxMV\nvtjWVnDSpY849JmJVOBO4bXy08074Hk2oP7MQ1UsZimQP4nKPjVDJUgBtd91\nNXWcBNicRN6Qth8kqdeNi2TYjq++eXLQHbARhZrpVJAGoFMZSqwfWODeFWlG\n6vedj8qEnHuPbs/ldidXw7MelIhau8dX1yTx1awrufxVjUe0DKhknUKLuzYK\noyvZ\r\n=ploP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"_nodeVersion":"13.13.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_0.0.0_1587596207545_0.7006119000849766","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"vue-imgix","version":"1.2.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@1.2.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"138245d839e1b7ae274c80649cd65e2c934af1b5","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-1.2.0.tgz","fileCount":11,"integrity":"sha512-7fSWLr4EkJHzk7p9GJUPdyNA7TnRVPVndKgD6epHwOYijDfCt3mvz+DL4CqLdtu2uJCqsedjVHBxqzZC0Hi0Qg==","signatures":[{"sig":"MEQCIGkh4brSVbTC/80Q+9oO4qAPKbPtEJ4FtwX6gF8i+JfSAiBrq21EfPY7ACBJwrohOZdeNvc6ir0uGKQqtKqvqBmv3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1325744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogc7CRA9TVsSAnZWagAAykUP/2mGI4vfRa37uYkW/Buw\niBRkZfrz/Ym9LdLzWDiO10waQusNLIbuoqDgqGRgTAZ61BQXxVa7pY3nqyJa\neZ9GvcgaC7a05geonmarm/06Z7TyYffoXpJT8lQgVe8EY+UKSA6hXiPg40As\nkOi2lk33vX6nAQ6Ik3IqdFSVbjqyUt21Rnr5FFT/LSP46NkaJjvxGZIjBFhj\n27rI+26oBOmNGzODMewlpukWJ8r0kru9epvo3oQdu4dCftka6y5pei6yCPZP\nnJtlCXouOJOpFH5CQwgCCrBq6Gj2w1cGZlKRWQwVVZ38xoj2Twf+HuJBcbPB\nhRy16V8J2WmPbHWx2HZYTM1Xz0woOXTa0ZfjMVGpoKhoryHepuHkvzfF24z8\nhC2Rulh2p3SSBQybKTATcFtRdnkGsdZCUik8eKMVW0UYcIbPdmWKhACLAmkF\nGDVJi8rMjlonx+p8qxXP7jCWme8jQ7BR3YiMm3WkUKDA9L7Bodo/OOvZiW6q\nQBDc7nYtSLOxJqEmprgucbtbH/wL01EHka7iXze9Sk5O3hLzUbKrcznDlsu5\n5wDH3l0ZNxXbYI6KQ3NCWl+9QpHqxnYbi8zcrW4rf8oCLWTH6SWBAbCj5pe6\ndlobyWP3NSZumy4mXqv7iJjtCYvy1alvWHPL/2lI+FK2K2rtl4gqfhHSnnvI\nkge7\r\n=86k/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"cfaf8b94bc55c96cc2048705c34914a6e8245c21","release":{"branches":["next"]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.13.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.11","eslint":"^6.7.2","rollup":"^2.7.2","core-js":"^3.6.4","cypress":"^4.4.1","prettier":"^1.19.1","read-pkg":"^5.2.0","typescript":"~3.8.3","@types/jest":"^24.0.19","npm-run-all":"^4.1.5","@vue/test-utils":"1.0.0-beta.31","@vue/cli-service":"~4.3.0","eslint-plugin-vue":"^6.2.2","rollup-plugin-vue":"^5.0.1","rollup-plugin-babel":"^4.4.0","vue-class-component":"^7.2.3","@testing-library/vue":"^5.0.2","@vue/cli-plugin-babel":"~4.3.0","vue-template-compiler":"^2.6.11","@vue/cli-plugin-eslint":"~4.3.0","eslint-plugin-prettier":"^3.1.1","vue-property-decorator":"^8.4.1","@rollup/plugin-commonjs":"^11.1.0","@testing-library/cypress":"^6.0.0","@rollup/plugin-typescript":"^4.1.1","@testing-library/jest-dom":"^5.5.0","@typescript-eslint/parser":"^2.26.0","@vue/cli-plugin-unit-jest":"~4.3.0","@vue/cli-plugin-typescript":"~4.3.0","@rollup/plugin-node-resolve":"^7.1.3","@vue/cli-plugin-e2e-cypress":"~4.3.0","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^5.0.2","@typescript-eslint/eslint-plugin":"^2.26.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_1.2.0_1587676987303_0.6750153677210542","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"vue-imgix","version":"1.3.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@1.3.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"2c92b9b0daf01362ced89dfef81c730cd46a402c","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-1.3.0.tgz","fileCount":11,"integrity":"sha512-TA60d1h06Xj2urye/BOEZnBZFLPwYwL5erdhV5H1xVOLS5OTfgSsTY+JB2tBr7uJtd/OAqXFdUH84Vw1bPuMpA==","signatures":[{"sig":"MEYCIQC69omEPb72v8BPl7stPmrLvrP94w3BgpXLAJXWuha1lQIhAJzPNKwQ2ZUGNijgdoD2LDQnCnjyDEFxeseJjY+ciR+f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1330097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoid+CRA9TVsSAnZWagAA/TEP/3abX3Ysr8zYSm2mwigP\nEZEgLGY/iTVZ+aGwd02Za2Oa52RdrprYTXiMZ4jlDaN9JDQwgekzwU/Q9mIV\n033oiNztiGTBDe/uujfMsIWu+IJAtMIN+zR1WZXgF7JLPnmsDk1RZ4MM2ZnK\n+Qc/FvkeRyvorjY0OZDpieS/ZKezqWGfxKRASXem1YwIV9Y5AMdo2iRUDdkL\nPvZIwzXyakKnk5lbE1nzq4lQU0rfdusZlplUM8Tp4wQGYuh3ixBMWQstvRrE\nCaSz4CQcNy7zCYj/tvGWOLctArJWz4qqWrqxfOpWiRu27cM4+VAPR5T6B0oh\nlzduK4QqJpDYPsvv9CNrDmwHKRt+72+00tijF6uFV8j+aE3K/JVal5BTFE5s\ngn+9xjHPE1rLdKOs+pTktebxS612AkLh3Saq+8TC9NmSQ5iSK9WP88n8UVdF\nftTKwtg9eYGvOFiocEnmcNVb6ykQ2+2mDAIZm9keJE+CIUmhRBn4WQkw9fXI\nYpmvrUjISoTDAWzUl4wx6pF8sKe6aap6xCSKeMHNP4KOlWO2oOFzc1fqqnFg\nnj/envQw/nkxRDA2k6otjlr33bJa4sswCpo0Jg0tdCHIiXLgeem99eQY/Bz3\nRRCJsEJ369j0tqkHIq+BdU9QS4AmW+VLxQPMWZuEZ5Tn/ihN3yGx1VuabVxh\nG3Cv\r\n=gX1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` provides an API for integrating [imgix](https://www.imgix.com/) into Vue sites.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n# ⚠️ Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\nFinally, vue-imgix needs to be initialized before if can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport { initVueImgix } from 'vue-imgix';\n\ninitVueImgix({\n domain: \"\",\n});\n```\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","gitHead":"0f5945a5939afd9265a975b3a6b9af13fa311779","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.13.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.11","eslint":"^6.7.2","rollup":"^2.7.2","core-js":"^3.6.4","cypress":"^4.4.1","prettier":"^1.19.1","read-pkg":"^5.2.0","typescript":"~3.8.3","@types/jest":"^24.0.19","npm-run-all":"^4.1.5","@vue/test-utils":"1.0.0-beta.31","@vue/cli-service":"~4.3.0","eslint-plugin-vue":"^6.2.2","rollup-plugin-vue":"^5.0.1","rollup-plugin-babel":"^4.4.0","vue-class-component":"^7.2.3","@testing-library/vue":"^5.0.2","@vue/cli-plugin-babel":"~4.3.0","vue-template-compiler":"^2.6.11","@vue/cli-plugin-eslint":"~4.3.0","eslint-plugin-prettier":"^3.1.1","vue-property-decorator":"^8.4.1","@rollup/plugin-commonjs":"^11.1.0","@testing-library/cypress":"^6.0.0","@rollup/plugin-typescript":"^4.1.1","@testing-library/jest-dom":"^5.5.0","@typescript-eslint/parser":"^2.26.0","@vue/cli-plugin-unit-jest":"~4.3.0","@vue/cli-plugin-typescript":"~4.3.0","@rollup/plugin-node-resolve":"^7.1.3","@vue/cli-plugin-e2e-cypress":"~4.3.0","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^5.0.2","@typescript-eslint/eslint-plugin":"^2.26.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_1.3.0_1587685245843_0.8575308528548038","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"vue-imgix","version":"2.1.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.1.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"501c74796319fdc895307fdfad2019bf554105b6","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.1.0.tgz","fileCount":10,"integrity":"sha512-s/3kniGmSs65kFAEk3B2WgJFnrvgdCazr2bkXNBn/gwaqKXGTw+3quk2oniTHoNQSli+AM4OF4SnD+DVm0aTjw==","signatures":[{"sig":"MEUCIArPR0zjGvJKGVrK7zCI663ewOtoDh3WHGFwpj1qzNXwAiEA5JVgxdiTYcmXNTIQn4Ji61qWhPcftNlRrISAblvVPuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1331172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq1xECRA9TVsSAnZWagAAi8QP/AhBqD0Uq+GAsvzDBVXc\nyob2TVwz1heD0WG4Wr0o8utG8JScKeoHZ0RDjPM8XDfYppEU5elzn+gIeI5I\n8t5INsHfDIerzakC13RJIf6xZ+/pjR45VRziM6mcJYXeEZnOC9nx+T3ut2Lj\nPBjJ9frzWliQdFkLG68aCf4k6povv7svMx1FdGqpa8SwcOM9rGv1qbMB84/2\n8/4neCcq2WnZp0LAMbNRhlVB2noBsSs9w6cnVnJJ4gGUwAtoG00nQ0fv1Dck\nTWhHRF67SZ5eUFGsI5z1ITaNJD5m512+Lz1BatF+o/5Me2ldcSaRQ2GN5FVR\nFKoQVgqH8G2H/uBtImr8lsVjxfeKHw14EhvljcvS8z9njg1mo9k5lInMa//d\nGcqkXpnHLeUw8N0EY1nfZV6wo7d9hPjl/thVr2pC1tVQvau0/89J38ikmoM4\nzZNj9E36ukQATG4KhrFryAgnI6cb2HUwFmUAfBxnBfsKylFpPPt21ntJa68M\nfmBt2BN1XdPnQ0CnrpYzvF4xlgBkv2pkenBPnY6CQ8DwlANXGMfbUzQ78pv2\nxY2Jsc0UQRvxR4zcgWYXu7rolU5pJvPrMTrDJEHVfRm4MoAstEYBVBjaGrld\n9psxJ787SjyQ1CwE3mcH1WcXWU1wkW6481RrNAOehpTyXF2wvLUedg+8HlJ6\nhuA9\r\n=D1HW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n});\n```\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n## What is the `ixlib` param on every request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"4740372c2be1a8d31239fc635c9813370cf2a2b0","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.1.0_1588288579505_0.9605610390729711","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"vue-imgix","version":"2.2.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.2.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"5d55e8c7214d353edc895c2ad9062f48ad6e0a6b","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.2.0.tgz","fileCount":10,"integrity":"sha512-atW2YGKXc5IQnqKEMRJO3xVowLi+/THjE9IEMSKv0kJh+goX3a3XsZB+Ehu58IcdYceY6sFpkG7PY+7x/9a5Ig==","signatures":[{"sig":"MEUCIHua5VT9oVfZZ3nytFLiwQtqcpp+TshJQp4+VkFWyyQXAiEA4NkOoDxlGVUUA/hdmq7PQca8Rv+QlAJj8pIyymA30ps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1332021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq4R3CRA9TVsSAnZWagAAb/4P/iAQFx/fap39uSR9tb7+\nCvqoZYgyXBUqXxb3eIQODjmp0r9O4RcNMMwE4JO8ELjTNH1G7gLHdhGBr/e3\nGTXOvTALdGGyyXlfFB2WSoPsCTpLScuY0yKQBGQTYq1OFZQInTDZNBYbtjQS\nfpVf59XsEey1OjHmvCBH1PxeQTwqwu2VolWeh67JWaWvItzLHZ5brR9zxi6j\nkw2aW8krgib9SoXEGwrtCMrmLcSXir61TDmyPGPud3g6ZrqwLitcyd0OsXR1\nz+fhHRzg1J/uQjBqwvVcRb7Gm9woWVTHDWKIaYd6CjoWBRFx93CVuIMBEqTc\niE1KuSmo2oegCqaj49duLbcfRtY82Iucivl/Ksqu0Rh5vv4eS0DPD3iHTFRl\nKTtFMtnWAzDAjNZdLm4i6DWTyh26Eymiv0ucJiCzhqMNto2HOGDMc0zdrzAe\nyQd/PAFWWStooxNW7egjOX6JjI1YfDXk2NDV2QLjTag1ZbaqbairyxjPV+G+\n6Bm18TxONr74VUPZNMWElGRWCeM67K5/3jX6wIkW/8T7xrZL+b46KYWpZ+gu\nUTtXGlYnaZk462ePUrGPe+xS6cLAaG6tbkN/dodhPZ1zdxP33G0cqUN1zDc4\n7LLrjP8z9vQ/UWXg6sEGEeBkCGarZnDsAISVCsZU9HNB4Pzdrf/6SOLGFs1r\nbPce\r\n=JF7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n## What is the `ixlib` param on every request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"367974c248fa6c2a15774d9a55af56481ca3c811","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.2.0_1588298871061_0.2848179069013177","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"vue-imgix","version":"2.3.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.3.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"f3288ca5ac7eb2a5caed95f5b5bc0029ffe1f198","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.3.0.tgz","fileCount":10,"integrity":"sha512-vvvKXo2ey8FY1yPhO+pAgKsz1kflzXygMOmfGbXNZSoAyRaOs0R+/RbKl9wvAQzqG9ZIHQ+soVhcdzc2jY/APw==","signatures":[{"sig":"MEUCIQDCvLRpdW6ypCLZ9XbMhnGKFiERqRkxqF4hxfJ6bRM6XQIgDoBBmo0ZVjQFYCXsfQ+Qa7HkeurjP1Nd6lJCnN+6l4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1333971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq4vUCRA9TVsSAnZWagAAT7kP/RvKNIIEGc/xwUcRBCuL\n3hzUE7P4aYB//g94RLwYKM2rLnq5BFdIssI863ujacMTNSIkOYoyZWGPpV+T\nZoieKgOWxMhLJb5mBogfpX1K9dDMq+H6VeS5mzQgUjZmbY51YY96PFLCDZiG\nP+fx8oYRnHVFNEFS3/Eb42s2KTSvuHDQCY3yrt3GNcG944V5yMG+L6yS87bw\nIwmnF1BrckWqDqxtbW32O9FPXvt/UoqfXqj5QkAvYKDBL7kZKH6AKCeWLKaj\n1UXDPl+MMR7KFDOuZeFqkiVh6z+vxLaTbqBxm5UdJflR+201jpudxqL+sYiF\nwIBSscAlhA1c4RxDRqwd6GCtf1niHC4FCyU+6L3KrEthVTN4AOGFaF+j4Ygb\nHqTl3kHdnIlA8ppW3mdxZR2nJHeP+RAUgeUZ/3vWbdYBBZf+goxPvbYBuITW\n7uiCR9tppTbUvMpBSEf2HFFHPEdaNqgitZlUSWaS9oBHfOp2jbQzKptUx/2m\nlet30niHiCmADPSe7htjT+s8LSwbcbj6aAWv1G2vv2/biPP5z5SxN0Fd1LMx\nHBmNeuafl2A8cGI5UzxQAZnRA6UQuZBqIJPkTAJTpsyAg9gxueiQCXk9v8DW\nrDCbxgBaNamxnpeSqsbK+ZVJ5PZccLSZSESvqYKaN+UqaYzOqVJekuho99dC\nOn3c\r\n=GkgW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom srcset width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n## What is the `ixlib` param on every request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"833ad12bd00118fa9cd3bee3373acc5db3eb1ada","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.3.0_1588300755722_0.2911513972888855","host":"s3://npm-registry-packages"}},"2.4.0":{"name":"vue-imgix","version":"2.4.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.4.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"ed23ab7b7afdfb71ba0dbe416fe19c52ab6b2be2","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.4.0.tgz","fileCount":10,"integrity":"sha512-JacleUScV9DOgoPTC+WhbifI4koMTZikD1bGefDyzuXOIW7a3rNGSG7txMnggy6Bg84+BEPHfJOaeHBxFaN0ww==","signatures":[{"sig":"MEUCIQDUSb+IE8sNFQS7CqjNbCN0I86JxgjvfPPOJcvxHHHWngIgA/YSAlD8gP8isgyAa/9UeHpsJ5o4a7alGqZ+s1qYcQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1335596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq4+OCRA9TVsSAnZWagAAxuEP/1xMvU+t1stDmfwQ4hjf\nKYoRiQbmKZOoVf8PzQqgvbS/KRoakcUl9d5BEApx3rofK628cTE08G1crsIb\n+F1JzcAmlsYwRGmXcljDkpnheyOVOLUMDiUVeJc420g47XyhKKZ9ggcPog4P\nv/0d0t4SCpXTtrOuRyJa8JCokVM/R46V1oRWPxEpuMMl44SHPTxDLnqRx3Ik\nIRSQ05uvTxiYtCTwowy9bw6fW84zhG7Ag1RElP7v1Rcr3La1p82SRGiOQyTq\n3ZOokzI03rYHhxfemS+1gkmC8PCfmfQ+OxDH31Pq/zKVJcLT21EkXInzuKQA\nIjM693zUpgFdu+ntrdD+gmr+Du0Zzr2HyZ81XFQOdiT1kRItfOSDDKEbOoXh\nq35FokLVMcwBuKUAvf60HNnCfMth3IH8hmCpVcS+Lzx+Vth/dHfuY2bcImfm\nYzPHYB9Tadbs22Bst53mzHs8m6SJY/U2iRVPtNUzjeajmy74rIGYO3zyuPN3\npRRFhRexSTt0nFQFn8DVIgGmBRtxuLTSPGGXS/yqW+Gj/f1lefO2XEF1+gd9\ng1mdQ82kDpm0wunJkV9dGqI7vEpZ34CfBY/5/A0OzeY6m91zz+qO1SkHfY7C\nO6q0wYFU6VIZbve8cbF42/YxiD4fGrCgrNr5ah9yJGPfOzAhe4F/dOu9WWT3\nPANx\r\n=z1Vm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom srcset width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n## What is the `ixlib` param on every request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"c6bbe97a8c3d77abe094ea0466a0fdc4bf890a2c","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.4.0_1588301709968_0.1260628539209936","host":"s3://npm-registry-packages"}},"2.5.0":{"name":"vue-imgix","version":"2.5.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.5.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"fb1d9dd1ec4324c0777f1e7184d04984807a291f","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.5.0.tgz","fileCount":10,"integrity":"sha512-pvb3iCwpcP+DKG1/lg0XH9iIPG1lUCcGXSStfZnwBdybLt4M/db7Jzz1JyXvdZQDiD+WzhIvKRs5WGs9AdOPLA==","signatures":[{"sig":"MEQCIGLyv+rRNCkC//7cA0O5IEaQIVyqTQERSBEQ6sYI62hoAiADQXUZK4d+4dwr9TemVb8ddGfhu0uDrbRFy3UeyxjWMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1338265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq5r4CRA9TVsSAnZWagAAaoYP/22UwoOtLXOZZXlOeRCl\ngmVfl8R5FfAI1OSihBwEuyL9dgbG9qOvEwfArcZn+YAYDh8eTE/2FS6ws19U\n4+CMSbl+g8zrxxkOXnoTMyIU+wyBV/nLAVfjZYyeX282+MrsSfja7Op9EAzn\nQBbMCaIi0/MVXRJLZ4bEpbHH13/D0/UDzqQCZYXfhYV/j8Rl9bSDDDFtIXuN\nHXcNiU5dcBuRjMTt1Ww9T3xnq0j7eMfg3LI1+F+LzQjvxxxg20YCRs/rAF11\nsHAGAQifoSikpACdqMFt8+ykjCCEP/95fq2KuVYgCcs/FL9dmiPAdRyQHxmj\nnONkQ81noyipjKlcmW+qgx2veF4Ltrl6qtQMZ0yYh5rGqqEQmYBWoU3PjeOI\n7YK9huJsT5GG8YCHaoEXjs70naV6lLFHvOSZX9YZs6TqMzs4Kgs9iVGketvz\nNvL4JDQGoIHBr+pXRcKBf9blALoLKhgo0KAhlBb8IrrnLhtjlIEN1AfRbxQH\ns7dSXHp0soUJoSUl1iZrOXeFdjAN7kKrgyBhPDq5I13ElLisMRLZVdheoEMq\nWF6ENXXg49zUkZAw0OmAzTR83E5lWSjoP27U+QtbGojvhvw3VpJog+1Ijt7y\nB4DU0EFMmjBjWE7oSszPPqgHzD+LLG+4wR2ZDeBif3RVfGWFROk3y1eurhXC\nmWYK\r\n=EOE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n + [Custom srcset width](#custom-srcset-width)\n + [Width Tolerance](#width-tolerance)\n + [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n- [What is the `ixlib` param on every request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify `App.vue` or similar to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n display: flex;\n}\n\n.App > img {\n margin: 10px auto;\n width: 10vw;\n height: 200px;\n}\n```\n\n`./app.js`\n\n```html\n
\n \n
\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom srcset width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n## What is the `ixlib` param on every request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"b8d6cc9c68467ba8d5d381097d28403ad93b72b2","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.5.0_1588304632335_0.1443237940605211","host":"s3://npm-registry-packages"}},"2.6.0":{"name":"vue-imgix","version":"2.6.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.6.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"a9a0ec06bf8321c595616c1d332aded7271f87f6","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.6.0.tgz","fileCount":10,"integrity":"sha512-bB0YNUKyG7Zm0RwgKSokC5B+Sp08XfdJX4G4Z6Mgp0K/LFGkZ/qpU9eDvwKfgL5fXnim13nhLQmNFeKBquodpA==","signatures":[{"sig":"MEYCIQD9fJibbLi8J6cITlq1X0WRYou3G0xNh0zm4mTR2nWaZgIhAM3zkh913TV9lSDy/KvY3hCp2vt8biNb+QkLyG7L86lp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1340535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq6dMCRA9TVsSAnZWagAAD4EP/ApdM+dMOr3ZMt4qhKtI\nbpQl8z0ZKv3Vz8C5f6K6kanWOrLH9nd/uIG+AbRuwrOk6bjp97vZpLwlIT5v\nDODUtBE1jlHdTir/XVBd2Ygtg42EeeTVUce1UcDg9u1VtrFpc3X9i68Awfb3\nFIC6z+ZSrKTnAidfZ4vd24sqtecsGhUSHGPipaC8J0MDj+3d6hkGcdYl4euy\nSF6hIo+Ex/Sh0q8VKWTZPUSDA24Kaj8LGBemNCGJvXkfb3QMhw1OvnMRVCl+\nXEcAiKD2MWfAE8uJkjXUiI1RAT5srpxSJl/DzSzLlP39XwzWs2KmFLNeoSBZ\nkGio++UKX0o9RUlb8d6ZJobB4zfnlLBIJFmVm4Cbal0x3RG2swd20OVU2cU/\n2GYvk8iRt/h3YZzjUmhD+F879YSkyVzDeA79s82mKeqy2pkWj6p7HXu/Fm1M\n3omZWEt5dPyu8Vpb0S22FeU5Fi7VhsemMmh4gg5Edcs4kRplHVXFVAWcQJty\nc4l5EoYlBK7QXh6mxsA67d44ED7NkGHIH7v7fjbh8rVkpKm6XqyGzarDq7ul\novCbUHc8RMe1omVc2FR3DVBNXxfyljjmrYhq2lltkyynqsDWEyD7UARJCshk\nVrtRzc+zKG1whr3QkQZZeUPsXtbTGpMdXdmQiaaBz842dmeWzniAqUxedC/f\noDcL\r\n=r22D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"74d1c0853cd095c1e4b86f7e8d05956978bb437c","release":{"branches":[{"name":"next","channel":"next"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.7.6","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.0-beta.33","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.6.0_1588307788044_0.6681731632884265","host":"s3://npm-registry-packages"}},"2.6.1":{"name":"vue-imgix","version":"2.6.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.6.1","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"84d079b775a8aba98646e96ba6069f6756c0b98a","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.6.1.tgz","fileCount":10,"integrity":"sha512-DMxE3YSZkCq+bQgfHtWwDjWyAKSeVbJgSGdYs2A9kTZgsOP9TixkGCdJqAcE4BaXS1HYgZ/tfGHm4iOw/RiKiA==","signatures":[{"sig":"MEQCIFaLTPMUYOdKvPgPWGu5KO8HIHiBveTAe2gRENv1kMM2AiAyGBMXVGAugCJT/V/mYAHa9BIWpxNr++3zRzCjjZTrXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1340521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJcbCRA9TVsSAnZWagAAGTYP/iD62+zawojaaZUJLfvN\nttFfVsx4dGZ1YY0XmtKYNiMO9zNwcZGOKUtKrXNgosVb8zMGL1pO2gDf22ht\n8VueqfrvQle479lCiNy7Eemo1mf6UV1CMiLBddvf2Dh/ov/BeBXmy8ESXjvJ\nIkFcXebGiCiNOLoICd/L9G/krg24vi6/idJjNRN9WACnCG3AO7pDARg1MoHM\nMxS3Skhi63zaEYyarHhyNGpbETtuYl5UbvIiJWhO9vPVE0xFXPdvfo+00Jg+\nEowL+xgeAakUR9wmFsN7UcaM3y4Q8I93VPIbsbUS4pYjVZuoz0WB2g0spi5r\nlrgoYZJUTtk+f6FGXQ+Qr+k/DGfM4U/dglHUPZ0naTtjxCWP3i5KQn9I/MQQ\ncXAEVSm9QlQKL3kT9MFAXvxr/uJH5LiGTnseDQA7UcctbAxiBMg8k2TTBeS1\nQ4bzfFyCQXwdufCkvwT+CDWZm96TEuzPgvr+vA7Jv896sRRY8jLN1lHPsfO0\nhwAspBCDqh8ZC/vXTdBLZUC9YQHQijZEgWNf2RwS6dYIbzf1AvUSI6rw4V9G\nsmtV36SM+kVSPj4Jy+88qmr+Hxv4Ih89hcvJihNld32atfmGPmQNxSJj/t3v\ncQMvLcoyFGdaIxYkVNWU7Zi0UsNcO54Mk8aC70uTrwzabKTP9CDlyqwg25FO\n2mxl\r\n=yH12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"74d1c0853cd095c1e4b86f7e8d05956978bb437c","release":{"branches":[{"name":"next","channel":"next"},{"name":"master"}]},"scripts":{"lint":"vue-cli-service lint","build":"run-p build:umd build:es build:unpkg","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-imgix.esm.js","test:e2e":"vue-cli-service test:e2e","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-imgix.umd.js","test:unit":"vue-cli-service test:unit","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/vue-imgix.min.js","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.13.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.11","eslint":"6.8.0","rollup":"2.8.2","core-js":"3.6.5","cypress":"4.5.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.8.3","@types/jest":"25.2.1","npm-run-all":"4.1.5","@vue/test-utils":"1.0.2","@vue/cli-service":"4.3.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.6","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@testing-library/vue":"5.0.2","@vue/cli-plugin-babel":"4.3.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-eslint":"4.3.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"11.1.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.1","@testing-library/jest-dom":"5.5.0","@typescript-eslint/parser":"2.30.0","@vue/cli-plugin-unit-jest":"4.3.1","@vue/cli-plugin-typescript":"4.3.1","@rollup/plugin-node-resolve":"7.1.3","@vue/cli-plugin-e2e-cypress":"4.3.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.30.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.6.1_1588893467426_0.05845193517017977","host":"s3://npm-registry-packages"}},"2.8.0-beta.1":{"name":"vue-imgix","version":"2.8.0-beta.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"MIT","_id":"vue-imgix@2.8.0-beta.1","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"bd9bcd09ffe24af378b77ccc867c24c02003a64c","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.0-beta.1.tgz","fileCount":13,"integrity":"sha512-OZq7aOz48HpE64glGCME0fbky2KqEOSw6erPjymgoY/cxKws1BBhBPA8v/UFl2aQbGoN5Kp5jPG9OXI/8Tx5gg==","signatures":[{"sig":"MEUCIEQoPi8bmHC3sRC+BG/Z9jORuk4GlhfMXTURs8uZ2K8fAiEA5Veru4qYRkiziUk/hybxAuueL9Y0rNrgTRWu/BadMWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Yp9CRA9TVsSAnZWagAAwSYQAJJ+1qiDQavkjt906sJr\nV4iHpvBtSIbdnXlGEWPipx7AbLAJth1wn2DAki+qdg33athr3EtoTMBYQFE8\nHdLntiGtJmvI0rZdEBJ2vWu8pVtUttSKhV4izBnURugbQhOJ8pAIwdwhZv4U\n/7KeW4k4yAWJoM/0T9FYbezr/WKzZeSVxKjJ4fM3ou6j3rNg3ME+akS3o8+b\nuuDIplVXcuFT25O1lssh7IVVRSW+x4rAObAb7y7nOoa/9v0AHid+KXVTudV8\nk04LCwzJqsmnr0Ci0CSB/RwrGxZpYHWa5jEfcXzas+fNOSdUlNqDYm9vUutn\nuShUDXm0RdNBfvmQnjjLUv+DwPw2XbbBbaJHLuGfXgfIs7W5IU5V+i5yIF4Q\nWOH6GmwUkdUTTScSl85I07srfQ/n/1gI76fw6AnOxeHLWlsEhVase6kiH3YT\nez3TpzETx0zGoPWk6lUSCfDtOHys37fFFRfmyFzNKyaWXyno9J7guNzLgKAR\nIHVYdLiJ9o7iUoYUqHQznhPNEYZ1ltUFQpC19cTgowJ0/29JH7RehXxiUUbb\niR2/2wV8UcZVQt8AfkQcayCtbNFV5hYKdjFdp0IjAO/lyDENhfMig/PE5AHS\noYnhYgkNl2/6heRbvq+lgPEcCGucXOhnd5otkZpC1/dUUT+HaTLjy0K+tcg8\nv5EY\r\n=zTIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n⚠️ **Work in Progress. This library is currently in development. We're planning to have a stable version of this library shipped soon, so please keep an eye on this space!**\n\n⚠️ **These docs are for the beta channel of this library. To view the docs for stable channel, [go here](https://github.com/imgix/vue-imgix/tree/master).**\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n * [Polyfills required](#polyfills-required)\n * [Standard Vue 2.x App](#standard-vue-2x-app)\n * [Vue 3.x](#vue-3x)\n * [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n + [Picture Support](#picture-support)\n + [Lazy-Loading](#lazy-loading)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n + [Custom Attribute Mapping](#custom-attribute-mapping)\n + [Custom Srcset Width](#custom-srcset-width)\n + [Width Tolerance](#width-tolerance)\n + [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n + [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 2.x App\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n### Vue 3.x\n\n⚠️ Currently this library does not explicitly support Vue 3 as we are waiting for its public release and a stable API. Once this happens, we will implement official support as soon as we can! We will also be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n### Nuxt.js\n\nTo configure vue-imgix for a Nuxt app:\n\n1. Add a `vue-imgix.js` file in `/plugins` with the following contents:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n auto: 'format',\n },\n});\n```\n\n2. Add the plugin to your Nuxt config (in `nuxt.config.js`) like so:\n\n```js\nplugins: [\n { src: '~/plugins/vue-imgix.js', mode: 'client' }\n],\n```\n\n**NB:** This enables the [auto format imgix parameter](https://docs.imgix.com/apis/url/auto/auto#format) by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nThe main idea here is that you should be able to use this component just as you would an `` tag.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here, along with our recommendation at the end.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n3. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n4. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n**Our recommendation is to use a combination of native lazy loading and Lozad.js.** See how to do this below.\n\n##### Lazy-loading (Native + Interaction Observer) **Recommended**\n\nThis approach uses native lazy loading for browsers that support it, which is more and more every day, and uses [Lozad.js](https://apoorv.pro/lozad.js/) for those that don't. Lozad.js uses Interaction Observers to watch for changes to DOM elements, and is more performant than using event listeners.\n\n\n\n\n\"Data\n\n\nThe approach taken here is to create a custom directive that will work differently based on whether native lazy loading is supported or not.\n\nYou will need to ensure you polyfill Interaction Observer for older browsers. [Here's one](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\nModify your app's setup code to add the following code:\n\n```js\nimport lozad from 'lozad'; // Import Lozad\n\n// later on...\n\nfunction setupLazyLoad() {\n // Check whether native lazy loading is supported.\n const isNativeLazyLoadingSupported = 'loading' in HTMLImageElement.prototype;\n\n const lozadDirective = {\n // Called when element is setup the first time\n bind(el, binding) {\n if (isNativeLazyLoadingSupported) {\n // If native lazy loading is supported, we want to redirect the \"lazyload\"\n // data-attributes to the actual attributes, and let the browser do the work\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n // Otherwise, we tell lozad to listen for when this element scrolls into the viewport\n let observer = lozad(el);\n observer.observe();\n },\n // This is to handle any changes to the url that we might do after we've loaded\n // the element the first time\n update(el, binding) {\n // We need to manually set the img attributes if either:\n // - we're using native lazy loading, or\n // - the image has already been loaded by lozad, since it doesn't know to\n // watch for changes, and so will miss any changes to data-src or data-srcset\n if (\n isNativeLazyLoadingSupported ||\n el.getAttribute('data-loaded') === 'true'\n ) {\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n },\n };\n\n Vue.directive('lozad', lozadDirective);\n}\n\nsetupLazyLoad();\n```\n\nThat's all the setup we need to do! Now there's a `v-lozad` directive available for us to use on our images! So let's do that. To use this directive with `ix-img`, make sure you're using `attribute-config` to redirect the src and srcset to `data-src` and `data-srcset`, which will be picked up either by Lozad, or the code we just wrote before.\n\n```html\n\n```\n\nYou can check this example out on CodeSandbox:\n\n[![Edit vue-imgix-lazyload-recommended](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-imgix-lazyload-recommended-ttch6?fontsize=14&hidenavigation=1&theme=dark)\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n##### Lazy-loading (Interaction Observer)\n\nLazy loading can be done with an Interaction Observer. The best way to do this is with a library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/)), but you might also want to roll your own.\n\nYou could modify the recommended code above to remove the native lazy loading support in order to create a Lozad directive.\n\nHere's a [CSSTricks article](https://css-tricks.com/lozad-js-performant-lazy-loading-images/) about using Lozad.js, and [another one](https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/) about rolling your own lazy loading\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"dceec63b577ff8dd78a408e2a85baa1bbbf8ee68","release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator",["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],"@semantic-release/npm",["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}],"@semantic-release/changelog"]},"scripts":{"lint":"vue-cli-service lint","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"7.1.0","rollup":"2.11.0","core-js":"3.6.5","cypress":"4.7.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.9.3","@types/jest":"25.2.3","npm-run-all":"4.1.5","@vue/test-utils":"1.0.3","@vue/cli-service":"4.4.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@rollup/plugin-buble":"^0.21.3","@testing-library/vue":"5.0.3","@semantic-release/git":"^9.0.0","@vue/cli-plugin-babel":"4.4.1","vue-template-compiler":"2.6.11","@rollup/plugin-replace":"^2.3.2","@vue/cli-plugin-eslint":"4.4.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"12.0.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.2","@testing-library/jest-dom":"5.8.0","@typescript-eslint/parser":"2.34.0","@vue/cli-plugin-unit-jest":"4.4.1","@vue/cli-plugin-typescript":"4.4.1","@rollup/plugin-node-resolve":"8.0.0","@semantic-release/changelog":"^5.0.1","@vue/cli-plugin-e2e-cypress":"4.4.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.34.0","@google/semantic-release-replace-plugin":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.0-beta.1_1591052924456_0.35314562411010453","host":"s3://npm-registry-packages"}},"2.8.0-beta.2":{"name":"vue-imgix","version":"2.8.0-beta.2","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.0-beta.2","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"14a1abfe19d0d9087e6cc34a49acab9658ead600","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.0-beta.2.tgz","fileCount":13,"integrity":"sha512-E+VARrDL/Uo5BwN3OVMSXFnkfW5NOWALSFflW+HQvqLxA5VPMLEYCUFmggzVacky1wQrDKKpxKTreIkQHkn5QA==","signatures":[{"sig":"MEUCIQCKZVYQ0WlA62v7gXEkngeue1pct5DM1QV+dUCuLymF5AIgbyyZKz1pjOKy8MdL5jAOdSWZe6Rd24eQP1E26zqRmF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1seaCRA9TVsSAnZWagAARm0P/0PtWTS38hBlTybZ0FFs\nCB2/3JnoZh2VFRh3DS1LfmS0K+UhPyOqTRpUeiZY1VK1zmH7Fht+ePlzI/2R\n8qdy3Futm/OONX+cfupxPs14qoN821c4THzvTdhRtDkqNJBDAyepz1jl0zQR\ng6gwq8SPVUhv0z6JE1Gp9reo2fnHsMULWS7y15BcFWhAMTgUygenfotPIjXv\nOhvVwOH6y40wwOHDnloFeMP2duSnAf1jV7zoD5ekiVOi7dBdO6Oji9JBkWou\nQp351FYbcxeKU2pgHrvVCGG30Q/NSNsBGinWv2ul8GAg4FJTv0RKl5K8LYUC\nIbyRWRn8RN5ViJdsoayLvtGCveJ16wH/aklrY1glwZq77hXr60a84kEdGKcG\nGF58mglGHubdEgrl40UbvKMDVW/K8mLwdJphv6LCVdHjPVNT04NVEBrEwQOz\nw2GmGxSQcL7RYuldPwybk4KY7JocHuw8653Um5FV2IyQNBVUpCPn8yiMMzV6\ngjap97sYEMr0mEDcK53TkqgtFlofIKlWNip6V1SxF7xiIc6hDC5qsOwk/zoW\npe1Nl5/ONZjYzPZlIA59N1/cUFPclAbR+D/kHiJQrrTeBJRCz0tvA0RG7PmS\n7v7568TgPTALJ61LEoP4iYQO5Vrc1peK3pXxjeMq+/apbEt/Cn/Z5UF645FK\nJewA\r\n=9UU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n * [Polyfills required](#polyfills-required)\n * [Standard Vue 2.x App](#standard-vue-2x-app)\n * [Vue 3.x](#vue-3x)\n * [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n + [Picture Support](#picture-support)\n + [Lazy-Loading](#lazy-loading)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n + [Custom Attribute Mapping](#custom-attribute-mapping)\n + [Custom Srcset Width](#custom-srcset-width)\n + [Width Tolerance](#width-tolerance)\n + [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n + [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 2.x App\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Vue 3.x\n\n⚠️ Currently this library does not explicitly support Vue 3 as we are waiting for its public release and a stable API. Once this happens, we will implement official support as soon as we can! We will also be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n### Nuxt.js\n\nTo configure vue-imgix for a Nuxt app:\n\n1. Add a `vue-imgix.js` file in `/plugins` with the following contents:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\n2. Add the plugin to your Nuxt config (in `nuxt.config.js`) like so:\n\n```js\nplugins: [\n { src: '~/plugins/vue-imgix.js', mode: 'client' }\n],\n```\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here, along with our recommendation at the end.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n3. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n4. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n**Our recommendation is to use a combination of native lazy loading and Lozad.js.** See how to do this below.\n\n##### Lazy-loading (Native + Interaction Observer) **Recommended**\n\nThis approach uses native lazy loading for browsers that support it, which is more and more every day, and uses [Lozad.js](https://apoorv.pro/lozad.js/) for those that don't. Lozad.js uses Interaction Observers to watch for changes to DOM elements, and is more performant than using event listeners.\n\n\n\n\n\"Data\n\n\nThe approach taken here is to create a custom directive that will work differently based on whether native lazy loading is supported or not.\n\nYou will need to ensure you polyfill Interaction Observer for older browsers. [Here's one](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\nModify your app's setup code to add the following code:\n\n```js\nimport lozad from 'lozad'; // Import Lozad\n\n// later on...\n\nfunction setupLazyLoad() {\n // Check whether native lazy loading is supported.\n const isNativeLazyLoadingSupported = 'loading' in HTMLImageElement.prototype;\n\n const lozadDirective = {\n // Called when element is setup the first time\n bind(el, binding) {\n if (isNativeLazyLoadingSupported) {\n // If native lazy loading is supported, we want to redirect the \"lazyload\"\n // data-attributes to the actual attributes, and let the browser do the work\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n // Otherwise, we tell lozad to listen for when this element scrolls into the viewport\n let observer = lozad(el);\n observer.observe();\n },\n // This is to handle any changes to the url that we might do after we've loaded\n // the element the first time\n update(el, binding) {\n // We need to manually set the img attributes if either:\n // - we're using native lazy loading, or\n // - the image has already been loaded by lozad, since it doesn't know to\n // watch for changes, and so will miss any changes to data-src or data-srcset\n if (\n isNativeLazyLoadingSupported ||\n el.getAttribute('data-loaded') === 'true'\n ) {\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n },\n };\n\n Vue.directive('lozad', lozadDirective);\n}\n\nsetupLazyLoad();\n```\n\nThat's all the setup we need to do! Now there's a `v-lozad` directive available for us to use on our images! So let's do that. To use this directive with `ix-img`, make sure you're using `attribute-config` to redirect the src and srcset to `data-src` and `data-srcset`, which will be picked up either by Lozad, or the code we just wrote before.\n\n```html\n\n```\n\nYou can check this example out on CodeSandbox:\n\n[![Edit vue-imgix-lazyload-recommended](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-imgix-lazyload-recommended-ttch6?fontsize=14&hidenavigation=1&theme=dark)\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n##### Lazy-loading (Interaction Observer)\n\nLazy loading can be done with an Interaction Observer. The best way to do this is with a library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/)), but you might also want to roll your own.\n\nYou could modify the recommended code above to remove the native lazy loading support in order to create a Lozad directive.\n\nHere's a [CSSTricks article](https://css-tricks.com/lozad-js-performant-lazy-loading-images/) about using Lozad.js, and [another one](https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/) about rolling your own lazy loading\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"43d31febae188f75fddc82d2a7a18f22446e5443","release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator",["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/npm","@semantic-release/changelog",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]]},"scripts":{"lint":"vue-cli-service lint","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"7.1.0","rollup":"2.11.0","core-js":"3.6.5","cypress":"4.7.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.9.3","@types/jest":"25.2.3","npm-run-all":"4.1.5","@vue/test-utils":"1.0.3","@vue/cli-service":"4.4.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@rollup/plugin-buble":"^0.21.3","@testing-library/vue":"5.0.3","@semantic-release/git":"^9.0.0","@vue/cli-plugin-babel":"4.4.1","vue-template-compiler":"2.6.11","@rollup/plugin-replace":"^2.3.2","@vue/cli-plugin-eslint":"4.4.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"12.0.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.2","@testing-library/jest-dom":"5.8.0","@typescript-eslint/parser":"2.34.0","@vue/cli-plugin-unit-jest":"4.4.1","@vue/cli-plugin-typescript":"4.4.1","@rollup/plugin-node-resolve":"8.0.0","@semantic-release/changelog":"^5.0.1","@vue/cli-plugin-e2e-cypress":"4.4.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.34.0","@google/semantic-release-replace-plugin":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.0-beta.2_1591134105510_0.5392504323352081","host":"s3://npm-registry-packages"}},"2.8.0-beta.4":{"name":"vue-imgix","version":"2.8.0-beta.4","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.0-beta.4","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"8682f44d3e0e80cc3d9646c8cf648f262625c050","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.0-beta.4.tgz","fileCount":13,"integrity":"sha512-40adP9Hn5ezd/6nFk7oNgB+QIuw0UxIUVDgpJzSnuFwk+aHR09JN/tzjxDx7Zjwca6JKbVXH9FrXrDxuq/U2Pg==","signatures":[{"sig":"MEQCIFKE1rjuOX8JzuWSSf+vUzV9cUx6oHX8LAAs5JRdkyk/AiAof3h2l6c8GCZiTffEOXaDPksf/B++hBs4TVq2kmERbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CnzCRA9TVsSAnZWagAAUlMP/i5RlfTbgKGDu3mSXo3K\no89JS6Yy9thz07oa5/fFae+h2Fc8ZYIP0eu1S/6LEAp7r8BOzG5i8ma6vGSO\nMdORA+DAE/cOvdvnq7yfyauEuqXe+yjmXTauZifG6o0wuKeDYzGMyGpGF28v\nhPr3TA39RdoHAtbzSZd1YrLwdlvp/TDG6Q9LNsku4dF09nQuR2/iMpffQYN8\nHPWHHpR7ehShdSXL4q+6kpYLPkzCdgB2vTOAV1GqCRaw30rqbcCw6y8/c6oY\naKMWTKTIqHiX87FmZv8LTNB/hwCm/ugbbKDpK+N3rOlXbQTWChXNP3lSLosu\nsdSQ9fPQ50zcJyOYdvLVbvJT51hfPKO52OpiYm0KGJ2eykY2gBA7Jr3uw5Bq\nLX9WWJONGrc54BX/oleQCc2vCw16WvCH+rHF2BsVTQcBRIKfCWsgHjF3xB3Q\noMcclaiN9em25VqeAaDM8IbtkpvFdJzUCRzXeiPcsIiWg+FN4UTAotTlvLe9\nKZHk5YkZUexMzNLrVpp3lMzOwItdS6OAtCkbWxn5dsADWqHIamv964knC1yZ\nYYZK5vKx44hnYsAQshbuyl7VSOB2HOPABVO3fOZhKt1u3dntWIFkM/VI/6r3\nZsvyj4tP6f6qZcnEtmXqnmAoN3qN6e2WT4+e0GhYgdhj4/2uJt3Oc+35ieoh\n82JB\r\n=fUhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.org/imgix/vue-imgix.svg?branch=master)](https://travis-ci.org/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/master/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n * [Polyfills required](#polyfills-required)\n * [Standard Vue 2.x App](#standard-vue-2x-app)\n * [Vue 3.x](#vue-3x)\n * [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n + [Picture Support](#picture-support)\n + [Lazy-Loading](#lazy-loading)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n + [Custom Attribute Mapping](#custom-attribute-mapping)\n + [Custom Srcset Width](#custom-srcset-width)\n + [Width Tolerance](#width-tolerance)\n + [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n + [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 2.x App\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Vue 3.x\n\n⚠️ Currently this library does not explicitly support Vue 3 as we are waiting for its public release and a stable API. Once this happens, we will implement official support as soon as we can! We will also be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n### Nuxt.js\n\nTo configure vue-imgix for a Nuxt app:\n\n1. Add a `vue-imgix.js` file in `/plugins` with the following contents:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\n2. Add the plugin to your Nuxt config (in `nuxt.config.js`) like so:\n\n```js\nplugins: [\n { src: '~/plugins/vue-imgix.js', mode: 'client' }\n],\n```\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's dpr and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here, along with our recommendation at the end.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n3. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n4. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n**Our recommendation is to use a combination of native lazy loading and Lozad.js.** See how to do this below.\n\n##### Lazy-loading (Native + Interaction Observer) **Recommended**\n\nThis approach uses native lazy loading for browsers that support it, which is more and more every day, and uses [Lozad.js](https://apoorv.pro/lozad.js/) for those that don't. Lozad.js uses Interaction Observers to watch for changes to DOM elements, and is more performant than using event listeners.\n\n\n\n\n\"Data\n\n\nThe approach taken here is to create a custom directive that will work differently based on whether native lazy loading is supported or not.\n\nYou will need to ensure you polyfill Interaction Observer for older browsers. [Here's one](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\nModify your app's setup code to add the following code:\n\n```js\nimport lozad from 'lozad'; // Import Lozad\n\n// later on...\n\nfunction setupLazyLoad() {\n // Check whether native lazy loading is supported.\n const isNativeLazyLoadingSupported = 'loading' in HTMLImageElement.prototype;\n\n const lozadDirective = {\n // Called when element is setup the first time\n bind(el, binding) {\n if (isNativeLazyLoadingSupported) {\n // If native lazy loading is supported, we want to redirect the \"lazyload\"\n // data-attributes to the actual attributes, and let the browser do the work\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n // Otherwise, we tell lozad to listen for when this element scrolls into the viewport\n let observer = lozad(el);\n observer.observe();\n },\n // This is to handle any changes to the url that we might do after we've loaded\n // the element the first time\n update(el, binding) {\n // We need to manually set the img attributes if either:\n // - we're using native lazy loading, or\n // - the image has already been loaded by lozad, since it doesn't know to\n // watch for changes, and so will miss any changes to data-src or data-srcset\n if (\n isNativeLazyLoadingSupported ||\n el.getAttribute('data-loaded') === 'true'\n ) {\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n },\n };\n\n Vue.directive('lozad', lozadDirective);\n}\n\nsetupLazyLoad();\n```\n\nThat's all the setup we need to do! Now there's a `v-lozad` directive available for us to use on our images! So let's do that. To use this directive with `ix-img`, make sure you're using `attribute-config` to redirect the src and srcset to `data-src` and `data-srcset`, which will be picked up either by Lozad, or the code we just wrote before.\n\n```html\n\n```\n\nYou can check this example out on CodeSandbox:\n\n[![Edit vue-imgix-lazyload-recommended](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-imgix-lazyload-recommended-ttch6?fontsize=14&hidenavigation=1&theme=dark)\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n##### Lazy-loading (Interaction Observer)\n\nLazy loading can be done with an Interaction Observer. The best way to do this is with a library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/)), but you might also want to roll your own.\n\nYou could modify the recommended code above to remove the native lazy loading support in order to create a Lozad directive.\n\nHere's a [CSSTricks article](https://css-tricks.com/lozad-js-performant-lazy-loading-images/) about using Lozad.js, and [another one](https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/) about rolling your own lazy loading\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from imgix-core-js to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from imgix-core-js to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"83ce0b2c77f27bf568d33acde532e8641607a6eb","release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator",["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/npm","@semantic-release/changelog",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]]},"scripts":{"lint":"vue-cli-service lint","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"2.6.11","eslint":"7.1.0","rollup":"2.11.0","core-js":"3.6.5","cypress":"4.7.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.9.3","@types/jest":"25.2.3","npm-run-all":"4.1.5","@vue/test-utils":"1.0.3","@vue/cli-service":"4.4.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@rollup/plugin-buble":"^0.21.3","@testing-library/vue":"5.0.3","@semantic-release/git":"^9.0.0","@vue/cli-plugin-babel":"4.4.1","vue-template-compiler":"2.6.11","@rollup/plugin-replace":"^2.3.2","@vue/cli-plugin-eslint":"4.4.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"12.0.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.2","@testing-library/jest-dom":"5.8.0","@typescript-eslint/parser":"2.34.0","@vue/cli-plugin-unit-jest":"4.4.1","@vue/cli-plugin-typescript":"4.4.1","@rollup/plugin-node-resolve":"8.0.0","@semantic-release/changelog":"^5.0.1","@vue/cli-plugin-e2e-cypress":"4.4.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.34.0","@google/semantic-release-replace-plugin":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.0-beta.4_1591224818630_0.9070381591208467","host":"s3://npm-registry-packages"}},"2.8.0":{"name":"vue-imgix","version":"2.8.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.0","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"jayeb","email":"eberle.jason@gmail.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"d82d0f0945abd3b03bb7776a5aab9cadcf77dc31","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.0.tgz","fileCount":13,"integrity":"sha512-zXwXo/ZeVCuqJlhj/3JHdOti8e+IEI/QA/55EAi4Ei6IaBupA7UpqvTCxXdlfAGMMkiAtiydtpo68HxImBpm6w==","signatures":[{"sig":"MEQCIFUIKLkS0aa6nqrr8YQ/akEtlBKpBQRu+YIwlHZr/x1wAiBgCftN6CyvGpLiN7XXIj9Ha3wqfzH4ClMyzAkfQTZ6Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2DVdCRA9TVsSAnZWagAA39cP/iAGWjB1Yv2l7zaN23Xv\nNf+2JJFSzOGmHM0ogcMWmWh0tfFl1q7rOjzgC1cNtW2Ly/OwM4xWyi2mZo34\ndbyuyTw04FYd1YslAyoMh//Wgg3WlTOnn7GW5lZEWgEO1KqqYEPrUuKzc6Vl\n+l0Rt2QxnRCBO2JtrOdzBWqyZmKkFSJ8Q7cZxa2c1pisVv9mg0A46a7Wjyxz\nWY4vKdq4mJ6lchVPDMJhRTcBq/GHFKDz374KffdvFuZZqveTBZVhHAmU9xk9\n2aQnxYA6bV5Ep1r1aW+uaVhC5KH3Xn7zqnqHKbdcQ3nf269orFo6m8Suumq8\nVCNG7EM0dE+oldtQIV+67sVsRhREPK7c/fycqzWvd56QgHPVvjhhbTI2E7le\nFNEO17TEHPJoqZIX6ROtZKcnFtnP58HKO/ixGKfqKatgNStXQ1ujI76n5gCS\n5bci60SWBmKBZ2X6Gsvwh/Gag/sbowp3WG6U5V2DmAznggshpWz1ieeKQRYD\nO1Ba7LJ7EkfSn33ZsxDqAaBnmfJ2cMeKySz0aW0DZ9RxrUskXtibnLnCr8j2\n0BYOjYNESBeqvbFqY0Jdc/cHwYyQx/8aKrrJgzTsqrCqkD985o4nKH77MDWJ\n+r+sw8ckey+o16fm3UlSUqAPLamMYsHRY3CnUWS8UJ86MORnVVCtaLUBTGpu\nbgiG\r\n=AuuW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"7abeacc75e6f6f9ade53a395503482f9ece4fc93","release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator",["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/npm","@semantic-release/changelog",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]]},"scripts":{"lint":"vue-cli-service lint","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.11","eslint":"7.1.0","rollup":"2.13.0","core-js":"3.6.5","cypress":"4.7.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.9.3","@types/jest":"25.2.3","npm-run-all":"4.1.5","@vue/test-utils":"1.0.3","@vue/cli-service":"4.4.1","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.3","@rollup/plugin-buble":"^0.21.3","@testing-library/vue":"5.0.3","@semantic-release/git":"^9.0.0","@vue/cli-plugin-babel":"4.4.1","vue-template-compiler":"2.6.11","@rollup/plugin-replace":"^2.3.2","@vue/cli-plugin-eslint":"4.4.1","eslint-plugin-prettier":"3.1.3","vue-property-decorator":"8.4.2","@rollup/plugin-commonjs":"12.0.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"4.1.2","@testing-library/jest-dom":"5.9.0","@typescript-eslint/parser":"2.34.0","@vue/cli-plugin-unit-jest":"4.4.1","@vue/cli-plugin-typescript":"4.4.1","@rollup/plugin-node-resolve":"8.0.0","@semantic-release/changelog":"^5.0.1","@vue/cli-plugin-e2e-cypress":"4.4.1","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.34.0","@google/semantic-release-replace-plugin":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.0_1591227740538_0.591987688514638","host":"s3://npm-registry-packages"}},"2.8.1":{"name":"vue-imgix","version":"2.8.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.1","maintainers":[{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"a44f82a089a290e382653200b283414176aaeb97","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.1.tgz","fileCount":13,"integrity":"sha512-dJLcs612vX+5vTj4aQACQ76S2IN1a8hhTvN36z8rHfc972xrYWMOggqzy5IEgHTHdhac4+7AQkG6x1UdqEFyGw==","signatures":[{"sig":"MEYCIQCW0/q+zhSI7VCW9obAW2bHXXHp1FG69rk8Srlo2tso4gIhAJcV7JBiYb4bGAz3waQQ/v9rxAnO+QxX1YQdSHMSM/+H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGCgWCRA9TVsSAnZWagAAe+gP/1MMyS/JTeWW2x/MSIIF\nV/C6N9onruzM1ich+SrezQ28IS9oXOivHwD17RI/wVI5sXGCRtulD5Vesjr4\nbLUH3c8CfC1EUXvvMeybAz0RLtSBQi5amYqHqF8SwftOopPuDqN7RO3yq6aR\nbc5L7XrcFRS3KQL2t/0W/Bqg1qGQIXX1b1wAZyxCUZGJTTJxhN+c/Xaf5J4b\nYUc1YZ55XVAzIP8RnVwywOusoFM2AtK4c0xv809TPp5qRTakh0oD7YQ8kWBG\nAaZzLSyUfW8WpeBaCRVnkwsTXo9dhg8tiAVVNJ3rY02eiUDsElRDh3jobd3U\nqI5Mp23jYIqv1ys5ZG7HyfFTxOk1Lk96vX6sdro9bjsSAMml7P5PG0gAeXWW\n23cu0tCtL5NmhSfaFAMUBa/aAXzfZcIVfvTdA29B76YvG6k1B2HrBRG71+48\naU4if3Bsg5LP0up8JuAwVAWwpLTQbD5ipwvz5Hazrn1qqAaqw+7qyt6ry/nt\n9sQCPF9LkqAfM8GIbgDpTFtI3ps0VZPb88UVMGAjqPxLpCyM0XhxIxCZ1+Jk\nah1dkdqCtRNCv00Uxd9eUt1e3bVizceQ/SZWt/HPyMqlUpggglq6GJ2uRY2K\ne2A8+e43K81NdXXQU8usve8+yd4dEV8w2AhoQ0tLCAyYddvH2MeFzGY5BRol\njv7l\r\n=c7PM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"e7bcbd2363cc52ca4c4c1e1b0dcda5adcaccd983","release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator",["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]]},"scripts":{"lint":"vue-cli-service lint","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.4","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","_nodeVersion":"13.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.11","eslint":"7.5.0","rollup":"2.22.2","core-js":"3.6.5","cypress":"4.11.0","prettier":"2.0.5","read-pkg":"5.2.0","typescript":"3.9.7","@types/jest":"26.0.5","npm-run-all":"4.1.5","@vue/test-utils":"1.0.3","@vue/cli-service":"4.4.6","eslint-plugin-vue":"6.2.2","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.4","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.0.4","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.4.6","vue-template-compiler":"2.6.11","@rollup/plugin-replace":"2.3.3","@vue/cli-plugin-eslint":"4.4.6","eslint-plugin-prettier":"3.1.4","vue-property-decorator":"9.0.0","@rollup/plugin-commonjs":"14.0.0","@testing-library/cypress":"6.0.0","@rollup/plugin-typescript":"5.0.2","@testing-library/jest-dom":"5.11.1","@typescript-eslint/parser":"2.34.0","@vue/cli-plugin-unit-jest":"4.4.6","@vue/cli-plugin-typescript":"4.4.6","@rollup/plugin-node-resolve":"8.4.0","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.4.6","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"5.0.2","@typescript-eslint/eslint-plugin":"2.34.0","@google/semantic-release-replace-plugin":"1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.1_1595418645793_0.7117021335431855","host":"s3://npm-registry-packages"}},"2.8.2":{"name":"vue-imgix","version":"2.8.2","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.2","maintainers":[{"name":"lball","email":"lball@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"d76e574a91355a6dafcd8fb6355ff40f3b6bb4a0","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.2.tgz","fileCount":13,"integrity":"sha512-MIfBqbLcRO8Xz7xa2e0Y3KqUSbIUn2duFC1eTfjSYEbEk61gzxBH3OoSbf3+rOVuJF7wuBo9iLhamHWc3tGDeg==","signatures":[{"sig":"MEQCIBdzjpsvz1TqaotgLJOMZt8D7P/YVSN0eUkg/CNELfCgAiBiLXBdqnNiqU26Jm2A20Ug3WCqbwJUV34aKBL9LL8eZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUIwoCRA9TVsSAnZWagAAyU8P/0Qr4VhYbPVZfIbKxtY/\nQ67HiUqhpXMdMXy7dgMp2k22N+6W1kS9SRlff4mCMx4AyMqOKVguUmI3UQHb\nCP/+42E1v9XSUeWH58B1tc37Sr12LJfrc9RrHAuGPiNq8igJpveAuEEV50PZ\nLJ9wcqnHxw0E0UXKolBclp6ZoAhHCmoOfJQk2KPqeUs8BP9VArcfaMBl/GZ5\n3La+m5VoOTYJpiA6DiLDtQxJhzBIQYQj+Z3XkOsENvnRVwXRhHhvdgD0pjvF\nmRImzoWWVY+44A36jPpX5sLOR8qhrdl9MW0Rgt5ZDlifZKmOOkcN0EcVk5pa\nJApvDZxgXQoHjWHgWzD96B8loxCENcSF2Paa36b/L9eYRSFRYs8ICLx7DdeR\nvakSNAzGx5Uz4U7IPq7JAsRhtcday8WY1AQ+ZWGbuTaqE4b32MuoY+zPkib9\nEk6sKRz+sAkdkCGJxj6zwBaOFjo0TDF5fGx8T22koYe3XEkHsTDJsLqfADK4\nMmbCtEqEyv3pD7t3ItwkRx6eUwfNyOvdXKmQdB8w3ZOLfbR+pXYbsPOOZl+K\nbKiNLwEc+7uQ4K4rS29/tz1JTJKf3Qrrugm2d4Y2wUcXOLeBCQg+AhvIDvKU\n9kuycyvBUN3/vFZgLDkNgdqdSSwY6N+kUYDqb8VIpxRXnOAS1bO46IN6qeK0\nRAVl\r\n=5bKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"f79533fe7ca59a760358e597aa088e4ecf3bc4cc","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.11","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"15.11.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.12","eslint":"7.15.0","rollup":"2.35.1","core-js":"3.8.1","cypress":"3.8.3","prettier":"2.2.1","read-pkg":"5.2.0","typescript":"4.2.3","@types/jest":"26.0.20","yarn-run-all":"3.1.1","@vue/test-utils":"1.1.3","@vue/cli-service":"4.5.11","eslint-plugin-vue":"7.3.0","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.6","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.6.1","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.11","vue-template-compiler":"2.6.12","@rollup/plugin-replace":"2.4.1","@vue/cli-plugin-eslint":"4.5.11","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.4","@rollup/plugin-typescript":"8.1.0","@testing-library/jest-dom":"5.11.9","@typescript-eslint/parser":"4.10.0","@vue/cli-plugin-unit-jest":"4.5.11","@vue/cli-plugin-typescript":"4.5.11","@rollup/plugin-node-resolve":"11.2.0","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.11","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"7.0.0","@typescript-eslint/eslint-plugin":"4.10.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.2_1615891496452_0.5610909011249459","host":"s3://npm-registry-packages"}},"2.8.3":{"name":"vue-imgix","version":"2.8.3","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.3","maintainers":[{"name":"lball","email":"lball@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"1dd43021dcdb8d4680361eda79de561d8e08de6a","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.3.tgz","fileCount":13,"integrity":"sha512-HWLgQwe9vC2VE4FoUQKnsqELhEwLrqBGICePFzV8rurE3/CX4T/rkd9Clp3EBpnD+6xGFm26Uxr6GlPYoMXiZA==","signatures":[{"sig":"MEQCIEEwZPgTgdbZvszh/w4hOt/pvSLlLou9T6axGwsoWGt+AiB+yScXpmvVH/fNyc3B96xSi90EtyP38GkeAXDPCdjMEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUn6wCRA9TVsSAnZWagAAPt8P/R5PLUqDBedt0bjwx8Po\nLAGWguDBhW7Lkj+kOUBIyZPA4wlX1U38riGJa8YRR4AXc9Agm69ZrYSKw3/z\n5AFSfs2jLzroiyVMq9iJbXJrB5o3lZVyVOfiazjpgn7L6xeuyzQx/79nA+ug\nVGaQmcMrgsq7BTrQEymQKp5pewkq1eg+EXRfcC/JjG9icht5UVxc7auiX0/n\nMimbhPfwVxHCx22G6RgqIyRHy9oSM93tPNoFBX8BdGL9TVNP3x4Ncnv1rT2e\nxKdphQ14mr/rkBC/dyoVIdBDpjx1RmT5SCgCjJ+Kep29iJyE+30MFQZe9kf9\ncXQSuOeSmWa3/Vb/P4xV+kudUxMEdaKQzYc8ZehlVUJV0Qi3Km+XfwT5xAO/\nwx2jzoc/CG+Q0vsRQN/b/DHDxWik3mdNKwCWQwzqqtwfkCnEZ0qBzuwb2O5P\n2rKsDZnKD+S1ySoezc2JYr03JlbrSCvqelq8ZIoX8OuCIL49fPWhg4V8qEfE\niXkURWEZNvxn4C4AugOtA0kJ4kiQ9+yTEcbN8xGWn8O2FWFoubg4r8DURQG5\nXOUpBa+iNs+Bb2gQoWjcxVkRJxipt3RF4uXxs2LZG3tQbym8MYCn0SYWaKw6\nlmCk9m7Cz/kcQ8G4YeiuYtGyXlSvhAExoJei1lSGXlqCV5Tsm97RE5lU6vDC\njlyq\r\n=oBSt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"85fa765c4f9aff13434600488387b89b2dc0e1a3","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.11","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"14.16.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"imgix-core-js":"^2.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.12","eslint":"7.15.0","rollup":"2.35.1","core-js":"3.8.1","cypress":"3.8.3","prettier":"2.2.1","read-pkg":"5.2.0","typescript":"4.2.3","@types/jest":"26.0.20","yarn-run-all":"3.1.1","@vue/test-utils":"1.1.3","@vue/cli-service":"4.5.11","eslint-plugin-vue":"7.3.0","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.6","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.6.1","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.11","vue-template-compiler":"2.6.12","@rollup/plugin-replace":"2.4.1","@vue/cli-plugin-eslint":"4.5.11","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.4","@rollup/plugin-typescript":"8.1.0","@testing-library/jest-dom":"5.11.9","@typescript-eslint/parser":"4.10.0","@vue/cli-plugin-unit-jest":"4.5.11","@vue/cli-plugin-typescript":"4.5.11","@rollup/plugin-node-resolve":"11.2.0","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.11","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"7.0.0","@typescript-eslint/eslint-plugin":"4.10.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.3_1616019119832_0.8008375231788178","host":"s3://npm-registry-packages"}},"2.8.4":{"name":"vue-imgix","version":"2.8.4","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.8.4","maintainers":[{"name":"lball","email":"lball@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"14d787bdbbde48f6ee3de7549fa296c65f686f2d","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.8.4.tgz","fileCount":13,"integrity":"sha512-DMNiOVx2N2KGPwsh1fRhdy6yNnEvrltIjfBCqHB4W1EepKbUaxdXReczL0DjAUZZoqLUMKApiKODR6PR3p9NKw==","signatures":[{"sig":"MEUCIAsrkIlEHLZGEX92+UDvH8J1vXmV0dOb8jvJJ3NhUYFiAiEAgki6TQy4ubgmNhJGPm+eqECCJft++muMYL7s0ocKi2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghtWtCRA9TVsSAnZWagAAi8EP/0lk+NX6NgmUACLZt/Vw\n4R990+lwvZyMdYVnTg3vtBiSadra2GLXGbKXAHaUL5K8xmQ4obGIiKMSZxiN\nuFb00pY7xr2t2Me8TO48wF+Yu0D2o7oRq/q3OV0dYDkT3NQjP7yJljxMJET5\ncw1y9BkX3g1EdPXSuUMHKu6Hz3VcJBm8J+TztWbbrB1qDicGB7DEIeRi2Y9a\nGaZrBKnS8tV7SsYn1Tbty3OyAgSRcX8N8kOpJXcAy38HgvBt3JvFqlXwNnT7\ncC1a8eb+CcNZFEzmOV007rffbMY3s6r5J8T/6Bkmrf3X2pS31FtYlSiX7Bdz\n1iPtX0RFjxNY4H1uNr3mf5DXSe8nuWjSj0r1tcQzK0WbSXUy/wqKNncaeiB+\nxASyXvDqAiequvu6dDw40K5RpUeKtvK39Rne3UW1IGP88BxQFFRsmXmIeRo3\nMjQgFPk1MmMVQb8ogp2jh3OFB7sdQgaJNSdhtDvh4kMza4qVF/qrbZg93Ook\ngRolBcjfGahm05wqMDevA16kBuT5CMunOSREUM0rnTIM6JAu2iXUFl+4x/93\nPQx3A/ZpFkyrNn6IbdDEQjl14eYVZ8wMC1j7ZEGkhFt2rZ46x/RHYEI/wfpV\nd9/Wz/1p9QvchosZQxK5HEwvRnD1BbYM1xw8ftsCBFNyXn+t7odaqnamhq8L\nzSXs\r\n=qy7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"66db479c420eca775eac60e4e086042f5f1427ac","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"7.11.1","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.0.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.1.3"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.12","vuex":"3.6.2","eslint":"7.22.0","rollup":"2.42.3","core-js":"3.9.1","cypress":"3.8.3","prettier":"2.2.1","read-pkg":"5.2.0","typescript":"4.2.3","vue-router":"3.5.1","@types/jest":"26.0.20","yarn-run-all":"3.1.1","@vue/test-utils":"1.1.3","@vue/cli-service":"4.5.11","eslint-plugin-vue":"7.8.0","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.6","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.6.1","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.11","vue-template-compiler":"2.6.12","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"4.5.11","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"5.11.9","@typescript-eslint/parser":"4.19.0","@vue/cli-plugin-unit-jest":"4.5.11","@vue/cli-plugin-typescript":"4.5.11","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.11","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"7.0.0","@typescript-eslint/eslint-plugin":"4.19.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.8.4_1619449260790_0.2857016295330854","host":"s3://npm-registry-packages"}},"2.9.0-rc.1":{"name":"vue-imgix","version":"2.9.0-rc.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.9.0-rc.1","maintainers":[{"name":"vuryanh","email":"rvu@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"0657512d8a505d0ef5f262f0664802a3688b5ed1","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.9.0-rc.1.tgz","fileCount":13,"integrity":"sha512-g5E3wzu9sng1PmemM4hZYv4iEqtCNnpOpOqEm//3d9MUxsqprjA4y7tN36OSjZdSyBkLK6ME3PpsTifEdPHkFw==","signatures":[{"sig":"MEYCIQD1PyPaFN1QsMnAXLswbPI8xYEt3uJgXEWIztdungE1mgIhAOz4hnUz2XnGoDB6MlZk2Hfd+87MD+D8sk98vcFYegPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5219CRA9TVsSAnZWagAA9eQP/R1PkWV5PtR4+6qt1tFh\neSsLHyPAezD6mhSY+M9IYg6k0RDG+l6TlSQOdZyPpaNSMgxQFy/NcAweFU3V\njz0w9Z97w/Znp5GuVSCuDHf3P76MRJLgSPuTIBmCc71Ik0ljPRuNFIkWirJm\niWEqQ9mPt4gF2b/tVqF5qBmdUKACDS31mnlCmuqsG1dbrVoxckyRWJlkecej\nTQnq4QELYDHlEmAJW5emHgYaNlhI1D2ctRtqJHY5jisN6+9F/aghNlnbwq5o\nxYq4qLAme3JT2ovhkDEgxy8thxxDLSjJEErfDTC6yOqbRxwLTpIcHdHu+Xk2\nzzgDAYiXZxaxgG8oVPkP2Hu8uH0qIVFWdLroagr3JvL2w5jHWTXDZEWrbnsI\n570P2slWz0Zm8dzVXvE1dpvotcS4tdEt8/BIYOpmoNdbjzbOI7yaH7CiPPEI\nRLvuBEAlQFmqKaAITnn7YcN9Axnam4DMOraxjgH95itwGkaEP51GJQ2QLvWh\nwqK++3aj45Z+TBWOkkllWLR2n05s+MCgXEpfJnfvUw9oArCXt2x07EOeC9Xn\nm4fbVb4osWPOB5efKfbmZXncnezH/SKhXq4bBcMCuPOBED8Dkdql1dPcI8Oa\n3ekPPLTEZPvFHAEaJ/hSKr6hG87sr5v2d8x1JUkhue3ecCzNcwCzpdhB3dWQ\nVdyo\r\n=SKuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3.x App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js\nNuxt.js *[beta](https://www.npmjs.com/package/nuxt3)* still isn't public. As such, we don't explicitly support Nuxt.js with version 3.x as of right now.\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"0825cca09b34d03618681c02291ab77f7bf8e65d","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"6.14.13","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"14.17.3","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.1.0","jest":"^26.6.3","vite":"^1.0.0-rc.13","vuex":"3.6.2","eslint":"7.29.0","rollup":"^2.8.0","core-js":"3.14.0","cypress":"^7.6.0","ts-jest":"^26.5.5","prettier":"2.2.1","read-pkg":"5.2.0","vue-jest":"^5.0.0-alpha.7","babel-jest":"^26","typescript":"4.2.3","vue-router":"3.5.2","@babel/core":"^7.6.14","@types/jest":"^26.0.22","@vue/compat":"^3.1.2","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/test-utils":"^2.0.0-rc.9","@vue/cli-service":"4.5.13","@vue/compiler-sfc":"^3.1.0","eslint-plugin-vue":"^7.12.1","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","vue-class-component":"^8.0.0-rc.1","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.13","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"4.5.13","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"4.19.0","@vue/cli-plugin-unit-jest":"^5.0.0-beta.2","@vue/cli-plugin-typescript":"4.5.13","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.13","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","@typescript-eslint/eslint-plugin":"4.19.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.9.0-rc.1_1625779579163_0.6489575678047192","host":"s3://npm-registry-packages"}},"2.9.0":{"name":"vue-imgix","version":"2.9.0","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.9.0","maintainers":[{"name":"vuryanh","email":"rvu@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"19fc892544e6d260879822ec1c2d89e2e3c1d165","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.9.0.tgz","fileCount":12,"integrity":"sha512-56zHyYQQ5iic/I8bUB0wzR0zlRjKeLLaRr/vfaMqlz+ocNGeZPEvTQgFUTmeF6KpDE9v+VWIaET67XSW6RN/dw==","signatures":[{"sig":"MEUCIFuO1x/2ps3887Kqjo/sYU6GlEZ/dXXM/NTOrRMj84LqAiEAquVCcWX7hRy2cSUKkI3hW79jZq0+LO8jkihpLik7Su8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg53FfCRA9TVsSAnZWagAArGoP/jrXkM0Mt+GhqWpoXJAV\n25i7VZUMk685Xnk8DukGk4sWFP2RBD1cls+WgpyiJZ2acaJtjIQc9gOEDaqq\nK+l7UYDFIuQQnDcf9o8q2REvbFfQQsf9/7Ms4sVSl9fenr7MAWjR5DkKIjJi\nX5iHIK7yt4UEPuUY4FbbGBSzMApc+Q8Op8fPCANmwuECkcoiZzYjuxBfXgRs\nY+8WamMBrklLZcYYDnEVF3OjcOSOe/ItHnOZGlRvJSusYSsfmre3Mhi3F2xc\nUV73efpK2BWony0cdnhlYgJ3y0iiLbZ0Mki3NizOfRgOEkitdB4zrH7vEpDh\nZ3SiHH/zygSRL54ZEKYrjHxGWSFPS7zgFjQDxDNJE0Gijjt5c7IMOnH++0Kq\nSd9Jd17BBoGVu3oUWfmvIzpleQPIbw7/Q0v7MQvi1dhWWXFMu3iz07zQDpJr\nsTa8Gpy4YMCAb9h0NYqEG6z8TMMliE99y4rKmmqHc3zXxChFeyZSb32AkJIZ\nhJ7A6SKhkb+koRcCaHtmdmOtJbIIg4y0IzDzMFAZhBkymFcl/w9RJwjRsgBY\ncgWfWY7KFPz0pPJsedXYTOqihQEdTgh3ne0HeWRJORlLiMdfF3WiTfCaZ0IP\nrFnBr1af6D/IVaMeGJakr732VgzqjYtAlnyZeRM6alW7BDOUZUtZtp0OL6uN\nkWGK\r\n=Eat8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","gitHead":"3b4e4a870d5e0137ec1d7351f55a485192be1bcf","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"7.19.1","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.4.2","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.14","vuex":"3.6.2","eslint":"7.29.0","rollup":"2.42.3","core-js":"3.14.0","cypress":"3.8.3","prettier":"2.2.1","read-pkg":"5.2.0","typescript":"4.2.3","vue-router":"3.5.2","@types/jest":"26.0.23","yarn-run-all":"3.1.1","@vue/test-utils":"1.2.1","@vue/cli-service":"4.5.13","eslint-plugin-vue":"7.8.0","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.6","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.8.0","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.13","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"4.5.13","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"5.14.1","@typescript-eslint/parser":"4.19.0","@vue/cli-plugin-unit-jest":"4.5.13","@vue/cli-plugin-typescript":"4.5.13","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.13","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"7.0.0","@typescript-eslint/eslint-plugin":"4.19.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.9.0_1625780574922_0.6957705404318042","host":"s3://npm-registry-packages"}},"2.9.0-rc.2":{"name":"vue-imgix","version":"2.9.0-rc.2","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.9.0-rc.2","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"9444b20f53206dcbe51cc0f613cc70313cc7a64e","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.9.0-rc.2.tgz","fileCount":12,"integrity":"sha512-SrsyyrDi4vtNAumT2JKFEQLsuP3y2x00FaxEmIKhV1qNz4b96ZDnpMUNWiZ/ETICwxvy36FAONmi/KyolaohiQ==","signatures":[{"sig":"MEUCIFqfBPP2ggjE8b9yzbIzplRe2WSW66bANjVjLOdJKjdvAiEA6N2Vg/uCKDq+SXp0dc8a3+K0bIpDctadrZZNA0rJlBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2KoPCRA9TVsSAnZWagAABbYP/jekYKeqTV6p2r+h2nXg\noRsmFGt/vHubGRjYNyhc431ZAdnkyF85z7ViGCMxIvvmR36RIQmv9laYuZqi\nUxxIPjkY58XNjOIueVDLt1hXqIRQeF8C8q2JV5FMkHsMi20mKtPe3UBjylQl\nzgs2UhDoSRL/glEVB7Y6JGo5sDqLoY3VZ8rLwCsDMvAKfwp4BZsfapo7Ua6l\nsGYAARkFOVHTsYZCYmUd9ZNDqKp0L3hRIkVIifu9iSQOr8sMj1KGMsGinkgJ\n+PHF1k0QPI/AgmXaE0P6x+JbuQI9kIzoRYiwB8Ks38tymGt9c0vUtTZshwVW\nlSC83yXD6NlptrQFJ3/qcpPeM47fpl+tn+kVoe7gb8gBdEWk5xclkxQ0it7q\nawroiqK1Cb115VULrAOTbA2cCl4HgfmFxlOm6660UYdsjjED3V8rj8SF8K4G\nnGIA7KHE2myXvzeGMV9zQVXu3eMOkmQQPxlXkQ02LOYLhR8+PfwOuLPYwlRb\nr7QO8xSAEGmwkYIFKHDx2XelzGu5P6igFcYsIhGuH1XL2alY4Zk0DomOhj4y\nkmNKa7KW2ibBsS/H0wYfZsB8786ByMj8XtjsAfuAN1WLqv9vwrUfuSq7iHSI\nVyBGe7z22d99/m7YetG7nxq3Z0yXMyO/6KYXkEplY/4t0GvGs/lnrgFKKZH2\nQU6T\r\n=k/xB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3.x App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js\nThis module is not yet compatible with [Nuxt 3](https://v3.nuxtjs.org/getting-started/introduction). As Nuxt 3 is still in development, we recommend using [Nuxt 2](https://nuxtjs.org/guide/getting-started) and [@imgix/vue-imgix](https://github.com/imgix/vue-imgix) v2.x.x. instead.\n\nHowever, Nuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"b0cf05508caf720bbb7b11b57fafbc32b47491d2","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"7.24.2","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.13.1","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.1.0","jest":"^26.6.3","vite":"^1.0.0-rc.13","vuex":"3.6.2","eslint":"7.29.0","rollup":"^2.8.0","core-js":"3.14.0","cypress":"^7.6.0","ts-jest":"^26.5.5","prettier":"2.2.1","read-pkg":"5.2.0","vue-jest":"^5.0.0-alpha.7","babel-jest":"^26","typescript":"4.2.3","vue-router":"3.5.2","@babel/core":"^7.6.14","@types/jest":"^26.0.22","@vue/compat":"^3.1.2","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/test-utils":"^2.0.0-rc.9","@vue/cli-service":"4.5.13","@vue/compiler-sfc":"^3.1.0","eslint-plugin-vue":"^7.12.1","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","vue-class-component":"^8.0.0-rc.1","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"4.5.13","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"4.5.13","eslint-plugin-prettier":"3.3.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"4.19.0","@vue/cli-plugin-unit-jest":"^5.0.0-beta.2","@vue/cli-plugin-typescript":"4.5.13","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.13","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","@typescript-eslint/eslint-plugin":"4.19.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.9.0-rc.2_1641589263387_0.047641193820816996","host":"s3://npm-registry-packages"}},"3.0.0-rc.1":{"name":"vue-imgix","version":"3.0.0-rc.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@3.0.0-rc.1","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"473f376054d8ba48f97661e3481b9d2318b2f3ac","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-3.0.0-rc.1.tgz","fileCount":12,"integrity":"sha512-DD7hKSKRFXtIqI4xlaZKnwlp47Kt0IND8NAwuxR8TI3ppiLgfSw8ON5jQM7e87ZUivw+6dQC0avGSOtBO10hQg==","signatures":[{"sig":"MEQCIAbArwtS/A8QlHZokd7/KN/ZAGOa6OvxaUpl3Ey6YV+/AiA7gmQ4sTPUZ5LiLv8tadhoFIQVE5akQH4xDoWGXIQdhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3xgpCRA9TVsSAnZWagAA2rAP+gMGsTXrEphQC+/saCDv\nDPsSrPqUBW0I7/w7l+RCE1wgwRbDJwGjuszeQjw5fT4b8mcuhKJ8TIPE3kUN\nR/JpZzxmk+ycdrT/fzbEutpW8bLbsfmBMX5ANTqkoIpxochFy+kcvNRb4skE\nRQc9z1rNar9snMmoAz5/B6Guysler5JOJgphHXK7AuTwI1ARuOiApLeTaBWF\nw6jXNN1XMAM3lSmu8rQ1NH017E6/TA5b+d5OeUZSom+O6gSVKOoRWwnt/6ht\nuoPcmFLcXmNjzOYNPjzki7U2rHoIVmALPw+oxDlUY7afjKMab9aIj22ezzIS\ntAnQiD0jMk+CZFVMBTnWAVyXOwjyOdU2EsdOiqUydc+ZTIiHxEO9+7x9G1mB\nTPd5YviIraNh861OFq4ggqkBmtnI7HgEd6i6iJghJNfOPGy+kGlSPauvVEN+\nxxKZsIiAdTbRCmA/9kkbEfE8U/oedah3rY15J1CpWgqMBipNvhRgSmYcJIuL\n5wmSZwz/M9IKrxSTWY5z5gmNLTBpYEkRVvkjR7dTZ6A9avyOjGV6vQhKrgKQ\n3KCPeO16rqWTpVL6BW1F6T9bKAEcKWHmsOHhbZiYwOOFUAvaTy/l2S6njrU3\nZN/rIRwkSAP6OzxQj2PdCaH5sdHtFYEYKONx2LIvGZGrgCHLGuIfCPfcPZXm\nf4xu\r\n=DVlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3.x App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js\nThis module is not yet compatible with [Nuxt 3](https://v3.nuxtjs.org/getting-started/introduction). As Nuxt 3 is still in development, we recommend using [Nuxt 2](https://nuxtjs.org/guide/getting-started) and [@imgix/vue-imgix](https://github.com/imgix/vue-imgix) v2.x.x. instead.\n\nHowever, Nuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"a8c31a5f93259ebe7c1b6acd4a7beb6f1f911e39","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"7.24.2","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"17.3.1","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.2.26","jest":"27.4.7","eslint":"^6.7.2","rollup":"^2.8.0","core-js":"3.14.0","cypress":"^7.6.0","ts-jest":"^27.0.0","prettier":"2.2.1","read-pkg":"5.2.0","babel-jest":"^27.0.0","typescript":"~4.1.5","@babel/core":"^7.6.14","@types/jest":"^24.0.19","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/vue3-jest":"^27.0.0-alpha.4","@vue/test-utils":"^2.0.0-0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","eslint-plugin-vue":"^7.0.0","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"~4.5.0","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"~4.5.0","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-unit-jest":"^5.0.0-rc.1","@vue/cli-plugin-typescript":"~4.5.0","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"~4.5.0","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_3.0.0-rc.1_1642010665102_0.8679174455186032","host":"s3://npm-registry-packages"}},"3.0.0-rc.2":{"name":"vue-imgix","version":"3.0.0-rc.2","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@3.0.0-rc.2","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"a135721436cec16db86de00510eea66d28d3df35","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-3.0.0-rc.2.tgz","fileCount":12,"integrity":"sha512-8hmoWGA1AmIkZTJOauSBtVwK4ua430gCqGrmal2J0e5VGLC+zjJvVHCln4REfYfyK2g0MXVCU7RQU7AjiXMjyg==","signatures":[{"sig":"MEQCIH3e/jwAgObNfveuoCqYtbDTI//S64iE5jtkjubrredEAiB23AIz9jieUf/DVIR77xh64BUov72eG49yaNEnruhucg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKjsEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLOA//dHeB1K4qa/eMON/hV7kEJRpAgsFo/Z7Xyn/ciPGFv2bT34BS\r\nqGHUteBoZlCw1QrfRSKGSNbpNgcvTXO/qMWYHPKBjD83QZDXFzGBHMmcoXVj\r\n07G/A2X85DH0lWwMNDa1Glck5SKTnKIwDx+cdc0Vo6+8iL9SYaBMg985yj6t\r\nDyI5DAEVpge4R4lgID4DA73HoA9WxWG4Q0An7Q/eIuCJ3IbjK1G/0209w83/\r\nwvB5SM4l6PZCU5NNfwxvtFfbxslbzPVdQf5LU4N0Tur0CvMtE7FMyzmXmfvD\r\ngybkwHeg2NoCoWWC7Y6ZV4jlU0eLRkRSAhBZK9BuNybf89mz/WkzskqvA/Cg\r\njm3i5XkdvMsrwe0YAQ+E/HenFA6o5SYVmUC+d2MZtgyGRJsZbZW/B4x8LrIU\r\nC5FcmDsUO51sO+m/HvX5ZK0Q9Q8LxVJ/VfvvSGtLSzRl+hAzHXXvrXovO0zL\r\nH/A2BPuPMPIsmBL8apa5RtepeoKCrhUMxd5FsUQVEUowQlgNqaLxWbwP1sze\r\nW9umMR+7HkIRpDxdwz3UqIgFQIiLO10R/49quW8pgsiLbWMsw8ZYMgmCNN+u\r\nzjtA85eWEn9kk4N2pEi97DxTFYVt8X97Yh9exPqFPNXdrTNMo09dZw23kDwD\r\nnXHvzLhxxZwSQRaFP3SGUW8c+nMBz2vPoWg=\r\n=abiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3.x App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js\nThis module is not yet compatible with [Nuxt 3](https://v3.nuxtjs.org/getting-started/introduction). As Nuxt 3 is still in development, we recommend using [Nuxt 2](https://nuxtjs.org/guide/getting-started) and [@imgix/vue-imgix](https://github.com/imgix/vue-imgix) v2.x.x. instead.\n\nHowever, Nuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\nTo render an image with a source URL different than the one setup in the plugin configuration, just set the `src` attribute to the absolute URL path of the image, like so:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"f7158e8aa3c98aa60ad95b3e4bf6eb15e0b595b0","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"8.3.1","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.14.0","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.2.26","jest":"27.4.7","eslint":"^6.7.2","rollup":"^2.8.0","core-js":"3.14.0","cypress":"^7.6.0","ts-jest":"^27.0.0","prettier":"2.2.1","read-pkg":"5.2.0","babel-jest":"^27.0.0","typescript":"~4.1.5","@babel/core":"^7.6.14","@types/jest":"^24.0.19","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/vue3-jest":"^27.0.0-alpha.4","@vue/test-utils":"^2.0.0-0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","eslint-plugin-vue":"^7.0.0","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"~4.5.0","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"~4.5.0","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-unit-jest":"^5.0.0-rc.1","@vue/cli-plugin-typescript":"~4.5.0","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"~4.5.0","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_3.0.0-rc.2_1646934788636_0.39680383731540814","host":"s3://npm-registry-packages"}},"3.0.0-rc.3":{"name":"vue-imgix","version":"3.0.0-rc.3","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@3.0.0-rc.3","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"8e97d8d6423c904f531196481cfe383b170c6cb6","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-3.0.0-rc.3.tgz","fileCount":12,"integrity":"sha512-zddBHwmRvU5pCZzNNf2RcbR7jx1D6aFR/Gp85pYRcbMStngVK5G5IUrpriGRfwe5cBGznZKTAwrOJFaIy9KBIQ==","signatures":[{"sig":"MEQCIFI4KiNGW2Uvammib65LJ65RghJRpPG42dXMlnWqbj9IAiBS+lh7yp9bBGHGnfwA6D9aHg9P9JCY1yFeSeWGhVYQCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYk4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCxA//ZJY8Fk1DQRE0Ba/KNzqcNw9saDmDFQx0gMTLaQbXZbQEcKe+\r\ns6BahzepnNR5QYZiWQd7mDdles/F+FLeLztZCQ4eNckyrUCBBUx1gNqO203/\r\nONX81+wjSMlJbGnWjM0pmUgbI0I/Llnc8cuTLg9H6ntQbG+uOq7M1xXKKMQH\r\n5gZDaKY5VHDJnQELAUExI+NsFvDM2l9qaaI/FBjQhrSVkj/QrhlPoW6ex9R7\r\nOyY3AZ08E/3Em/YFYgs9DbipW2MsYrvYrge2JEHHy0Q9fhZ0CbIqqOLaRZcV\r\nIQH+ahS3xMazyf1WldgZsoxJAT2UeHIYQ7JDfZJ6qJbBTMyy+cZZmMdQGTvc\r\nWL3MrDOETeMVhP1UlXUSwCUqA7lLzHC8UuQhxetnzg8Uc5IrND3tNptiCdaR\r\n1ZrhPClBRFHA9p7eWS7jEIAhFZFk7GXE5Lt9jyAXLLa3DNBHswP48fePqq8e\r\nVCa86FuEb/qgINsaQXPMNBZI7WyWuk9PFhT7/BQEZ2bdu1FazRkI/WcS0rmu\r\nk9Ad1MZ2XRlPnNSgp+jndILtkAL7WrxAEqZC9GELs6VnZXVFdIGleW5xI91h\r\nOQbEAYnMq5k7/MKmLehwFHuGdZ9QkLtnhPtaaO8IRdUUclc60HEhsrkZuv0R\r\n3o+u/RU1q1C8eoXC/D3MTxWxsLUQc+KxYFI=\r\n=rdnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from vue-imgix v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3.x App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js\nThis module is not yet compatible with [Nuxt 3](https://v3.nuxtjs.org/getting-started/introduction). As Nuxt 3 is still in development, we recommend using [Nuxt 2](https://nuxtjs.org/guide/getting-started) and [@imgix/vue-imgix](https://github.com/imgix/vue-imgix) v2.x.x. instead.\n\nHowever, Nuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\nTo render an image with a source URL different than the one setup in the plugin configuration, just set the `src` attribute to the absolute URL path of the image, like so:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"e90b5300d1a810bfae787302f0c0bda006a1a8f1","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"8.5.0","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.14.2","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.2.26","jest":"27.4.7","eslint":"^8.13.0","rollup":"^2.8.0","core-js":"3.22.1","cypress":"^7.6.0","ts-jest":"^27.0.0","prettier":"2.6.2","read-pkg":"5.2.0","babel-jest":"^27.0.0","typescript":"4.2","@babel/core":"^7.6.14","@types/jest":"^24.0.19","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/vue3-jest":"^27.0.0-alpha.4","@vue/test-utils":"^2.0.0-0","@vue/cli-service":"~5.0.4","@vue/compiler-sfc":"^3.0.0","eslint-plugin-vue":"^8.6.0","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"~5.0.4","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"~5.0.4","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"^5.4.0","@vue/cli-plugin-unit-jest":"^5.0.4","@vue/cli-plugin-typescript":"~5.0.4","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"~5.0.4","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^10.0.0","@typescript-eslint/eslint-plugin":"^5.4.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_3.0.0-rc.3_1650609701730_0.7349277024865828","host":"s3://npm-registry-packages"}},"3.0.0-rc.4":{"name":"vue-imgix","version":"3.0.0-rc.4","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@3.0.0-rc.4","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"99351119c233add19edc50a6716c2f7f52345ff9","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-3.0.0-rc.4.tgz","fileCount":12,"integrity":"sha512-VDzkieWQlQiMsrw0dkKlH2ltzZcpxFnafMa0stnTyiTLHhnmvgCtclAxPR5PBw/o9sPposidHw1IwFeUfrhowQ==","signatures":[{"sig":"MEUCIQCPps5n/GLVxJB3WVREGi12cTX2zmCl8pzO1oVpzcuL1gIga/3BzXkSw87yM5b57usVQo93UFJAN92mTSyvS81JWDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYnpjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKZRAAijb7ZD0Qj9hG6XW80sVs5LP/N22a7Zqvk7OIzt+P6CApQqFF\r\npLYGYdgS+5j9ZO/ezBajFlI8ttnd6cY9Gb6bjWBZuzlG9mtbT/h7vp6l6LzM\r\nsiF46A7CgtuDxMA0RlDIQLA8QoWyZBdDF1Tho196f6gtPc+dhNMNpP6rP6es\r\n6ZWTW1/I6OIJawOEDzFoHP+bjrIeHonwmufiKufNT9pUEn6CeXDGxhKRe98H\r\nlASld8uXXUUlxuFR4QfyKT6PKsfqQPFHmsSnomO5voHd/qhxyQTHmlevWitY\r\nburg0xs41NWeZgaAzn85Gz+DRcU+PV1B1bt2TAJJfaExXz5Qe5vsmetiD3vd\r\nAtP69GvsKsm34Xr7SJfSxa/VNw/eVIv8TbFRwWjs5ygKK/eTVligDXioU93F\r\naApZ4WvF+k3fT/Zckt2Z+jzFRN+/iOq0GvhRVg4X9/TsH+M82np3nMvd4jmw\r\nrrjHw4TLzAaBsJsKBqDyYEXPUM1cpecartqI17fhufVky1xI/8MSBEMEesDv\r\nYKW4h1GlqqEYwoI6SJY9UUV1L91GYOUby3ascZHmJUXvFsTwoWgspY4bDQ1M\r\n/W3NfRy4BS0KiHFH8KCMtUWo1HRIWbI1Fo0T4DLHd/WBuvk14oGVfRkPubq+\r\nEsaBCvUlIa1WNzjtAt4zVUO7edQvBVATJs8=\r\n=qgOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from vue-imgix v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/@next`\n- **Yarn**: `yarn add vue-imgix/@next`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3 App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js v3\n\n#### With `nuxt-image`\n\nNuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Using this library directly\n\n> For Nuxt v2 support, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nTo use this library with Nuxt 3, add the following code to `plugins/vue-imgix.js`\n\n```js\nimport { defineNuxtPlugin } from '#app';\nimport VueImgix from 'vue-imgix';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n });\n});\n```\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\nTo render an image with a source URL different than the one setup in the plugin configuration, just set the `src` attribute to the absolute URL path of the image, like so:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"04daed85c859a75854969462b6ef0c168490708e","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"8.5.0","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.14.2","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.2.26","jest":"27.4.7","eslint":"^8.13.0","rollup":"^2.8.0","core-js":"3.22.1","cypress":"^7.6.0","ts-jest":"^27.0.0","prettier":"2.6.2","read-pkg":"5.2.0","babel-jest":"^27.0.0","typescript":"4.2","@babel/core":"^7.6.14","@types/jest":"^24.0.19","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/vue3-jest":"^27.0.0-alpha.4","@vue/test-utils":"^2.0.0-0","@vue/cli-service":"~5.0.4","@vue/compiler-sfc":"^3.0.0","eslint-plugin-vue":"^8.6.0","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"~5.0.4","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"~5.0.4","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"^5.4.0","@vue/cli-plugin-unit-jest":"^5.0.4","@vue/cli-plugin-typescript":"~5.0.4","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"~5.0.4","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^10.0.0","@typescript-eslint/eslint-plugin":"^5.4.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_3.0.0-rc.4_1650621027538_0.26023264831959825","host":"s3://npm-registry-packages"}},"3.0.0-rc.5":{"name":"vue-imgix","version":"3.0.0-rc.5","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@3.0.0-rc.5","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"241ef35f6dfa59966331a8e27cb1311aed89a9de","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-3.0.0-rc.5.tgz","fileCount":12,"integrity":"sha512-5HG99Oe2gek2LigyU++QdjINBq2nAb0jZumFqzB2+aTvzmtZsKaJipr4vtxAUTkKimGdUVu+zYWi/O0Tkg+jTg==","signatures":[{"sig":"MEUCIFbXXyk95wuBwZWY1BLN37LfVH43x7cJKM/UBldl4tHTAiEA6yxApArPB5B/Ij5iDL9nHx2Dke8IzcYSUQ4PHQoYl60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ6FLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGBg//aTK8Nb2dz7tG+lqICwdf1YKKltTbuiMisl7Wx2dtR2918PAw\r\nEP7gVZeh/D/m3JT1pO49PYMBQl2dbE3VxVP0W2byYS90LWcyvBNXoxOPGnBU\r\ni6kdhWfWHKacktJOvZBYGOZGIZj55NhWtda+Y/AXeF5D20dtClEAMgJCYoUP\r\nRi5P5a4zBghJ/BdvenxdH3d+rbXimpOSPP9hxpqe99ZGsDqrT+W5mL5Ti1lq\r\niNNEJvWoQEuWSeM+c3rpd+FDCvS1WVUJR8Vai2OhxERKwRTMlcCy/z9K3max\r\nE4UMkTRNlYzyU9TPaZu648CbOUJ4qadWWaHkuAAGn7BKH8GhfxSZzLtx2Y7Q\r\nhpdH5VjFrJAt2rKYt91fd40mez4DmJelmvNDy42TQ7pcRWFHd3+34aFEcjXN\r\nQU4Lty4juMj7cBlzNxTPQT9MYZVmNtMV9rdwIBGpkR5W+Ij5uuUAuUPRauVC\r\nsGH86XYvLF76gLisXSbQD303UcsflK/Gi37WUosK+1TJtdmE1q2r2+mdMfhO\r\nlwjy/0porgVBDeBIaUaoVGLYuU88Opt+zNoG/1N+Xb9Fq7DHuw1sbp2gYTmF\r\ncL8TsZynKQTFeJX4/PRW5K3bYKlNFwgdc0WVCeGekvMnwdDrXFzhwNJ7gdWL\r\nC2FYDkaZ9NgEPeoRn3cpqY41w3Aam/QEnBE=\r\n=/jiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","readme":"\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n> ### Vue 2.x\n> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from vue-imgix v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n - [Polyfills required](#polyfills-required)\n - [Standard Vue 3.x App](#standard-vue-3x-app)\n - [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Basic Use Case](#basic-use-case)\n - [Flexible Image Rendering](#flexible-image-rendering)\n - [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n - [Picture Support](#picture-support)\n - [Lazy-Loading](#lazy-loading)\n - [Lazy-loading (Native)](#lazy-loading-native)\n - [Lazy-loading (Event Listener)](#lazy-loading-event-listener)\n - [Advanced Examples](#advanced-examples)\n - [buildUrlObject](#buildurlobject)\n - [buildUrl](#buildurl)\n - [buildSrcSet](#buildsrcset)\n - [Custom Attribute Mapping](#custom-attribute-mapping)\n - [Custom Srcset Width](#custom-srcset-width)\n - [Width Tolerance](#width-tolerance)\n - [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n - [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix/`\n- **Yarn**: `yarn add vue-imgix/`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 3 App\n\n> For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\n// Create and mount the root instance.\nconst app = createApp(App);\n// Make sure to _use_ the VueImgix instance to make the\n// whole app VueImgix-aware.\napp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n\napp.mount('#app');\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Nuxt.js v3\n\n#### With `nuxt-image`\n\nNuxt.js now has a built-in [Image component](https://image.nuxtjs.org/getting-started/installation) that can be used alongside imgix.\n\nYou can read more about our `nuxt-image` provider and how to use it in the [Nuxt docs](https://image.nuxtjs.org/providers/imgix).\n\n#### Using this library directly\n\n> For Nuxt v2 support, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch.\n\nTo use this library with Nuxt 3, add the following code to `plugins/vue-imgix.js`\n\n```js\nimport { defineNuxtPlugin } from '#app';\nimport VueImgix from 'vue-imgix';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n });\n});\n```\n\n#### Example usage\n\n```html\n\n```\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\nTo render an image with a source URL different than the one setup in the plugin configuration, just set the `src` attribute to the absolute URL path of the image, like so:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n> The following have planned V3 support, but as of this build they are not explicitly supported.\n\n3. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an v2 example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n4. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport { createApp } from 'vue';\nimport VueImgix from 'vue-imgix';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VueImgix, {\n domain: \"\",\n // disable version tag on all requests\n includeLibraryParam: false,\n});\n\napp.mount('#app');\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","gitHead":"c65372045e991a134e7f54235267717feffb769b","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e --browser chrome","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build","release:dryRun":"npx node-env-run --exec 'npx semantic-release --dryRun'"},"_npmUser":{"name":"imgix-company","email":"developers@imgix.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"git+https://github.com/imgix/vue-imgix.git","type":"git"},"_npmVersion":"8.5.0","description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","resolutions":{"cypress":"3.8.3"},"_nodeVersion":"16.14.2","browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^3.2.26","jest":"27.4.7","eslint":"^8.13.0","rollup":"^2.8.0","core-js":"3.22.1","cypress":"^7.6.0","ts-jest":"^27.0.0","prettier":"2.6.2","read-pkg":"5.2.0","babel-jest":"^27.0.0","typescript":"4.2","@babel/core":"^7.6.14","@types/jest":"^24.0.19","babel-loader":"^8.2.2","yarn-run-all":"3.1.1","@vue/vue3-jest":"^27.0.0-alpha.4","@vue/test-utils":"^2.0.0-0","@vue/cli-service":"~5.0.4","@vue/compiler-sfc":"^3.0.0","eslint-plugin-vue":"^8.6.0","rollup-plugin-vue":"^6.0.0-alpha.8","rollup-plugin-babel":"4.4.0","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"6.4.2","@semantic-release/git":"9.0.0","@vue/cli-plugin-babel":"~5.0.4","eslint-plugin-cypress":"^2.11.3","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"2.4.2","@vue/cli-plugin-eslint":"~5.0.4","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"17.1.0","@testing-library/cypress":"7.0.6","@rollup/plugin-typescript":"8.2.1","@testing-library/jest-dom":"^5.14.1","@typescript-eslint/parser":"^5.4.0","@vue/cli-plugin-unit-jest":"^5.0.4","@vue/cli-plugin-typescript":"~5.0.4","@rollup/plugin-node-resolve":"11.2.1","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"~5.0.4","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^10.0.0","@typescript-eslint/eslint-plugin":"^5.4.0","@google/semantic-release-replace-plugin":"1.0.2","conventional-changelog-conventionalcommits":"4.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_3.0.0-rc.5_1650958667278_0.346556423676309","host":"s3://npm-registry-packages"}},"2.9.1":{"name":"vue-imgix","version":"2.9.1","keywords":["vue","imgix","component"],"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","_id":"vue-imgix@2.9.1","maintainers":[{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},{"name":"imgix-company","email":"developers@imgix.com"},{"name":"czacharias","email":"chris@imgix.com"},{"name":"sherwinski","email":"sherwinhb@gmail.com"},{"name":"cnoble","email":"cnoble@imgix.com"},{"name":"matt-imgix","email":"mlaguardia@imgix.com"},{"name":"albertmejia","email":"albert@imgix.com"},{"name":"heyitsbryanm","email":"matiasbryan@gmail.com"},{"name":"ultimatealf","email":"aacosta@imgix.com"},{"name":"edsz","email":"esanchez@imgix.com"},{"name":"lball","email":"lball@imgix.com"},{"name":"vuryanh","email":"rvu@imgix.com"}],"contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"homepage":"https://github.com/imgix/vue-imgix#readme","bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"dist":{"shasum":"f683ecce5ec88e61656452311cb1b847206838bf","tarball":"https://registry.npmjs.org/vue-imgix/-/vue-imgix-2.9.1.tgz","fileCount":17,"integrity":"sha512-8+RJjqzrqNnahrEyWv8HZNzZ3DO6viUDMfc96pDCqa62zpGMdRw2VvUamBNGYYnTRMB+H2qHVjCpy9N0UuUu2g==","signatures":[{"sig":"MEUCIDp4eeapYVBURz+y3HO/8bz/xRV0QzgdloryLPG0S/MkAiEAlWcjmk/f2gkvgwaGDCqdbmJkhjHybv+47ApU9EfzCzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ6d7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1oA//SwFlh/A57WkO8RH9b3Q8yRpG0aZcjpWrGTYN61nRmGq3pvvS\r\nPazJefiBwNa9l4b9+pU/0+1w97iuTHSHPytMLrQdWgDd24z6dhPBodv/LFSX\r\n0bNlv6QFq9yc+ySIxDlY9sAusiSz/0yeLA/FfRxHwFMXNaQKvHHdk3QQOoTf\r\nt4TeCo6xPu7Ct5QPxAQfcXSpRvLMYz4i6fl4OQ8wi/rGirSN1JSAs6Xtlecv\r\nZp2dh8cGXDKyWoWpHZqi35hQBhWTYin1X66B57WKl+X0UTNYD0591dF+lr4T\r\n9I8NuvAVKSxW1j6jYQ+//Ox38sHlb6b8E1f6X0I0F1WvE03Wt4kfprpJOgX4\r\nGoZMBlRMZYO7mt9Q6omjdJPRXADLUsbeIivKJjifIMQi7oOVprDJm7ITkM7m\r\nlJAAfaSHUcXeiAQ1qD5lkxCU23X1Rpq6TSitp+UNxrPynmfTHOHJ2JVhWwJK\r\n+1YPQ8t/oYai3Twlj5L2AiGsZ5nwleyvrAqbE92iMsl1RDLcOawM/SnhomQf\r\nvToW2b8h+Ly3ou7AyuI3gMRLcvbFy31gAvUwqTMhr5gh/7uBPOJR3BWxOr7v\r\nuwhJ6gdDHJ+zlKg4e57G27ZqW9l1UcVuplH4TmDGmT27c0LwRT3/y4JZUyq8\r\nDCHy7cMqp1fY4m8OFazWxlhSRKoO3S5CO40=\r\n=5EX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-imgix.umd.js","unpkg":"dist/vue-imgix.min.js","module":"dist/vue-imgix.esm.js","release":{"plugins":[["@semantic-release/commit-analyzer",{"releaseRules":[{"type":"docs","release":"patch"},{"type":"deps","scope":"deps","release":"patch"}]}],["@semantic-release/release-notes-generator",{"preset":"conventionalcommits","writerOpts":{"types":[{"type":"feat","section":"Features"},{"type":"fix","section":"Bug Fixes"},{"type":"docs","hidden":false,"section":"Documentation"},{"type":"deps","hidden":false,"section":"Dependency Updates"},{"type":"chore","hidden":true},{"type":"style","hidden":true},{"type":"refactor","hidden":true},{"type":"perf","hidden":true},{"type":"test","hidden":true}]}}],["@google/semantic-release-replace-plugin",{"replacements":[{"to":"const VERSION = '${nextRelease.version}'","from":"const VERSION = '.*'","files":["src/plugins/vue-imgix/vue-imgix.ts"],"results":[{"file":"src/plugins/vue-imgix/vue-imgix.ts","hasChanged":true,"numMatches":1,"numReplacements":1}],"countMatches":true}]}],"@semantic-release/changelog","@semantic-release/npm",["@semantic-release/git",{"assets":["src/plugins/**","dist/**/*.js","package.json","changelog.md"],"message":"chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"}],["@semantic-release/github",{"assets":[{"path":"dist/vue-imgix.min.js","label":"Standalone browser build"},{"path":"dist/vue-imgix.umd.js","label":"UMD/CJS build"},{"path":"dist/vue-imgix.esm.js","label":"ES Modules build"}]}]],"branches":["main","f/rename-note",{"name":"next","prerelease":"rc"},{"name":"beta","prerelease":true},{"name":"alpha","prerelease":true}]},"scripts":{"lint":"vue-cli-service lint","test":"run-s test:unit test:e2e","build":"rollup --config build/rollup.config.js","serve":"vue-cli-service serve","lint:ci":"vue-cli-service lint --no-fix --max-warnings 0","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:test-app":"vue-cli-service build","prepublishOnly":"run-s build"},"_npmUser":{"name":"fredfogerty","email":"frederick.fogerty@gmail.com"},"deprecated":"vue-imgix has been renamed to @imgix/vue. Install @imgix/vue instead of this package.","repository":{"url":"https://github.com/imgix/vue-imgix.git","type":"git"},"description":"A simple yet powerful integration between Vue and Imgix","directories":{},"jsnext:main":"dist/vue-imgix.esm.js","licenseText":"Copyright (c) 2020 Zebrafish Labs \nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n1. Redistributions of source code must retain the above copyright notice,\n this list of conditions and the following disclaimer.\n\n2. Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE\nARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE\nLIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR\nCONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\nSUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\nINTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN\nCONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)\nARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE\nPOSSIBILITY OF SUCH DAMAGE.","resolutions":{"cypress":"9.1.1"},"browserslist":["ie 11","last 1 edge versions","last 1 Chrome versions","last 1 Firefox versions","last 1 Safari versions","last 2 iOS versions","last 2 Android versions","not dead"],"dependencies":{"@imgix/js-core":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.6.14","vuex":"3.6.2","eslint":"7.32.0","rollup":"2.61.1","core-js":"3.19.3","cypress":"9.1.1","prettier":"2.4.1","read-pkg":"5.2.0","typescript":"4.2.3","vue-router":"3.5.3","@types/jest":"27.0.3","yarn-run-all":"3.1.1","@vue/test-utils":"1.3.0","@vue/cli-service":"4.5.15","eslint-plugin-vue":"7.20.0","rollup-plugin-vue":"5.1.9","rollup-plugin-babel":"4.4.0","vue-class-component":"7.2.6","@rollup/plugin-buble":"0.21.3","@testing-library/vue":"5.8.2","@semantic-release/git":"9.0.1","@vue/cli-plugin-babel":"4.5.15","vue-template-compiler":"2.6.14","@rollup/plugin-replace":"3.0.0","@vue/cli-plugin-eslint":"4.5.15","eslint-plugin-prettier":"3.4.1","vue-property-decorator":"9.1.2","@rollup/plugin-commonjs":"21.0.1","@testing-library/cypress":"8.0.2","@rollup/plugin-typescript":"8.3.0","@testing-library/jest-dom":"5.16.1","@typescript-eslint/parser":"4.33.0","@vue/cli-plugin-unit-jest":"4.5.15","@vue/cli-plugin-typescript":"4.5.15","@rollup/plugin-node-resolve":"13.0.6","@semantic-release/changelog":"5.0.1","@vue/cli-plugin-e2e-cypress":"4.5.15","@vue/eslint-config-prettier":"6.0.0","@vue/eslint-config-typescript":"7.0.0","@typescript-eslint/eslint-plugin":"4.33.0","@google/semantic-release-replace-plugin":"1.1.0","conventional-changelog-conventionalcommits":"4.6.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-imgix_2.9.1_1650960250836_0.03682169640098332","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-04-22T22:56:47.544Z","modified":"2026-04-07T19:02:54.234Z","0.1.0":"2019-11-06T23:52:02.313Z","0.0.0":"2020-04-22T22:56:47.649Z","1.2.0":"2020-04-23T21:23:07.510Z","1.3.0":"2020-04-23T23:40:46.003Z","2.1.0":"2020-04-30T23:16:19.641Z","2.2.0":"2020-05-01T02:07:51.364Z","2.3.0":"2020-05-01T02:39:15.948Z","2.4.0":"2020-05-01T02:55:10.116Z","2.5.0":"2020-05-01T03:43:52.532Z","2.6.0":"2020-05-01T04:36:28.233Z","0.0.0-development":"2020-05-07T21:12:45.039Z","2.6.1":"2020-05-07T23:17:47.582Z","2.8.0-beta.1":"2020-06-01T23:08:44.608Z","2.8.0-beta.2":"2020-06-02T21:41:45.711Z","2.8.0-beta.4":"2020-06-03T22:53:38.762Z","2.8.0":"2020-06-03T23:42:20.664Z","2.8.1":"2020-07-22T11:50:45.947Z","2.8.2":"2021-03-16T10:44:56.598Z","2.8.3":"2021-03-17T22:12:00.163Z","2.8.4":"2021-04-26T15:01:00.946Z","2.9.0-rc.1":"2021-07-08T21:26:19.363Z","2.9.0":"2021-07-08T21:42:55.059Z","2.9.0-rc.2":"2022-01-07T21:01:03.532Z","3.0.0-rc.1":"2022-01-12T18:04:25.290Z","3.0.0-rc.2":"2022-03-10T17:53:08.851Z","3.0.0-rc.3":"2022-04-22T06:41:41.936Z","3.0.0-rc.4":"2022-04-22T09:50:27.742Z","3.0.0-rc.5":"2022-04-26T07:37:47.444Z","2.9.1":"2022-04-26T08:04:10.978Z"},"bugs":{"url":"https://github.com/imgix/vue-imgix/issues"},"author":{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"},"license":"BSD-2-Clause","homepage":"https://github.com/imgix/vue-imgix#readme","keywords":["vue","imgix","component"],"repository":{"url":"https://github.com/imgix/vue-imgix.git","type":"git"},"description":"A simple yet powerful integration between Vue and Imgix","contributors":[{"url":"https://github.com/frederickfogerty","name":"Frederick Fogerty","email":"frederick.fogerty@gmail.com"}],"maintainers":[{"email":"developers@imgix.com","name":"imgix-company"},{"email":"chris@imgix.com","name":"czacharias"},{"email":"matiasbryan@gmail.com","name":"heyitsbryanm"},{"email":"aacosta@imgix.com","name":"ultimatealf"},{"email":"rvu@imgix.com","name":"vuryanh"},{"email":"glenn.smits@imgix.com","name":"gsmits"},{"email":"arnofkd93@gmail.com","name":"arno_fukuda"},{"email":"frederick.fogerty@gmail.com","name":"fredfogerty"}],"readme":"\n## ⚠️ `vue-imgix` has been renamed to [`@imgix/vue`](https://npmjs.com/package/@imgix/vue), please install that package from npm instead.\n\nInstall `@imgix/vue@2` for Vue 2 support, or `@imgix/vue@latest` for Vue 3 support.\n\n---\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg)\n\n`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).\n\n[![npm version](https://img.shields.io/npm/v/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![Build Status](https://travis-ci.com/imgix/vue-imgix.svg?branch=main)](https://travis-ci.com/imgix/vue-imgix)\n[![Downloads](https://img.shields.io/npm/dm/vue-imgix.svg)](https://www.npmjs.com/package/vue-imgix)\n[![License](https://img.shields.io/npm/l/vue-imgix)](https://github.com/imgix/vue-imgix/blob/main/LICENSE)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_shield)\n[![Dependencies Status](https://david-dm.org/imgix/vue-imgix.svg)](https://david-dm.org/imgix/vue-imgix)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n---\n\n\n\n\n\n\n\n- [Overview / Resources](#overview--resources)\n- [Get Started](#get-started)\n- [Configure](#configure)\n * [Polyfills required](#polyfills-required)\n * [Standard Vue 2.x App](#standard-vue-2x-app)\n * [Vue 3.x](#vue-3x)\n * [Nuxt.js](#nuxtjs)\n- [Usage](#usage)\n * [Examples](#examples)\n + [Basic Use Case](#basic-use-case)\n + [Flexible Image Rendering](#flexible-image-rendering)\n + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n + [Picture Support](#picture-support)\n + [Lazy-Loading](#lazy-loading)\n * [Advanced Examples](#advanced-examples)\n + [buildUrlObject](#buildurlobject)\n + [buildUrl](#buildurl)\n + [buildSrcSet](#buildsrcset)\n + [Custom Attribute Mapping](#custom-attribute-mapping)\n + [Custom Srcset Width](#custom-srcset-width)\n + [Width Tolerance](#width-tolerance)\n + [Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)\n + [Base64 Encoding](#base64-encoding)\n- [What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)\n- [Code of Conduct](#code-of-conduct)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n\n## Overview / Resources\n\n**Before you get started with vue-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of vue-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your vue-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with ``](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Get Started\n\nFirstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-start) to set-up an imgix account.\n\nThen, install vue-imgix with the following commands, depending on your package manager.\n\n- **NPM**: `npm install vue-imgix`\n- **Yarn**: `yarn add vue-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**\n\n## Configure\n\n### Polyfills required\n\nA polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.\n\n### Standard Vue 2.x App\n\nVue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\nAnd that's all you need to get started! Have fun!\n\n### Vue 3.x\n\n⚠️ Currently this library does not explicitly support Vue 3, although we are planning to roll out official support for it soon. We will also be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.\n\n### Nuxt.js\n\nTo configure vue-imgix for a Nuxt app:\n\n1. Add a `vue-imgix.js` file in `/plugins` with the following contents:\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n defaultIxParams: {\n // This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.\n auto: 'format',\n },\n});\n```\n\n2. Add the plugin to your Nuxt config (in `nuxt.config.js`) like so:\n\n```js\nplugins: ['~/plugins/vue-imgix.js'],\n```\n\nAnd that's all you need to get started! Have fun!\n\n## Usage\n\nTo help you get started as quickly as possible, imgix has designed the API of this library to follow the API of a normal `` tag as much as possible. You can expect most uses of the `` tag to work just the same for ``.\n\n### Examples\n\n#### Basic Use Case\n\nTo render a simple image that will display an image based on the browser's DPR and the width of the rendered element using the power of srcsets, vue-imgix can be used as follows:\n\n```html\n\n```\n\nTo render an image with a source URL different than the one setup in the plugin configuration, just set the `src` attribute to the full URL path of the image, like so:\n\n```html\n\n```\n\n[![Edit festive-mclean-6risg](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mclean-6risg?fontsize=14&hidenavigation=1&theme=dark)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute. An important note here is that **sizes cannot be a percentage based value**, and must be in terms of vw, or a fixed size (px, em, rem, etc)\n\nThis will generate HTML similar to the following:\n\n```html\n\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n✨**There is new browser behavior in 2019/2020.** It is now recommended that `width` and `height` be set on all images to provide an aspect ratio hint to the browser. The browser can then use this aspect ratio hint to reserve a space for the image (even if the image is responsive!). The following example explains all how to do it. You can also read more about this development [in this amazing Smashing Magazine article.](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)\n\nFor the width/height placeholder image, we need three requirements to be met:\n\n- `width` and `height` attributes set on the img element\n- some `width` CSS value (e.g. `10px`, `100%`, `calc(100vw - 10px)`)\n- `height: auto` as a CSS property\n\n`./styles.css`\n\n```css\n.test-img {\n /* These next two lines are critical for the new browser feature. */\n width: calc(100vw - 128px);\n height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image\n}\n```\n\n`./app.js`\n\nFor the width and height attributes, they can be any value as long as their aspect ratio is the same as what the image's aspect ratio is. E.g. `width = 100, height = 50` is fine, and also `width = 2, height = 1` is fine. In this case, the image has an aspect ratio of ~0.66:1, so we have set set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.\n\n```html\n\n```\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```html\n
\n \n
\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly along with a `fixed` prop. The imgix CDN will then render an image with these exact dimensions\n\n```js\n\n```\n\nThis will generate an image element like:\n\n```jsx\n\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableVariableQuality`.\n\n```html\n\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x\n```\n\n#### Picture Support\n\nWith the picture element, images can be directed to have different crops and sizes based on the browser dimensions, or any media query.\n\nIt is recommended to check out our [introduction blog post about how to best use picture and the imgix API](https://docs.imgix.com/tutorials/using-imgix-picture-element) for some great tips and examples!\n\n\n```html\n\n \n \n \n\n```\n\n\n#### Lazy-Loading\n\nFor lazy loading, there are a few options to choose from. They're listed here, along with our recommendation at the end.\n\n1. Native lazy-loading with `loading=\"lazy\"`. As of May 2020, this is shipped in stable versions of Chrome and Firefox. [Example](#lazy-loading-native)\n2. Lazy-loading with [vue-lazyload](https://github.com/hilongjw/vue-lazyload). This library is pretty great, but doesn't support responsive images. In any case, this library fully supports vue-lazyload, [here's an example](https://codesandbox.io/s/vue-imgix-lazyload-vuelazyload-vl2u1).\n3. Lazy-loading with an Intersection observer library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/))\n4. Lazy-loading with a scroll-based library (we recommend [Lazysizes](https://github.com/aFarkas/lazysizes))\n\n**Our recommendation is to use a combination of native lazy loading and Lozad.js.** See how to do this below.\n\n##### Lazy-loading (Native + Interaction Observer) **Recommended**\n\nThis approach uses native lazy loading for browsers that support it, which is more and more every day, and uses [Lozad.js](https://apoorv.pro/lozad.js/) for those that don't. Lozad.js uses Interaction Observers to watch for changes to DOM elements, and is more performant than using event listeners.\n\n\n\n\n\"Data\n\n\nThe approach taken here is to create a custom directive that will work differently based on whether native lazy loading is supported or not.\n\nYou will need to ensure you polyfill Interaction Observer for older browsers. [Here's one](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\nModify your app's setup code (probably `src/main.js` or related file) to add the following code:\n\n```js\nimport lozad from 'lozad'; // Import Lozad\n\n// later on...\n\nfunction setupLazyLoad() {\n // Check whether native lazy loading is supported.\n const isNativeLazyLoadingSupported = 'loading' in HTMLImageElement.prototype;\n\n const lozadDirective = {\n // Called when element is setup the first time\n bind(el, binding) {\n if (isNativeLazyLoadingSupported) {\n // If native lazy loading is supported, we want to redirect the \"lazyload\"\n // data-attributes to the actual attributes, and let the browser do the work\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n // Otherwise, we tell lozad to listen for when this element scrolls into the viewport\n let observer = lozad(el);\n observer.observe();\n },\n // This is to handle any changes to the url that we might do after we've loaded\n // the element the first time\n update(el, binding) {\n // We need to manually set the img attributes if either:\n // - we're using native lazy loading, or\n // - the image has already been loaded by lozad, since it doesn't know to\n // watch for changes, and so will miss any changes to data-src or data-srcset\n if (\n isNativeLazyLoadingSupported ||\n el.getAttribute('data-loaded') === 'true'\n ) {\n el.setAttribute('src', el.getAttribute('data-src'));\n el.setAttribute('srcset', el.getAttribute('data-srcset'));\n return;\n }\n },\n };\n\n Vue.directive('lozad', lozadDirective);\n}\n\nsetupLazyLoad();\n```\n\nThat's all the setup we need to do! Now there's a `v-lozad` directive available for us to use on our images! So let's do that. To use this directive with `ix-img`, make sure you're using `attribute-config` to redirect the src and srcset to `data-src` and `data-srcset`, which will be picked up either by Lozad, or the code we just wrote before.\n\n```html\n\n```\n\nYou can check this example out on CodeSandbox:\n\n[![Edit vue-imgix-lazyload-recommended](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-imgix-lazyload-recommended-ttch6?fontsize=14&hidenavigation=1&theme=dark)\n\n##### Lazy-loading (Native)\n\nTo use pure browser native lazy-loading, just add a `loading=\"lazy\"` attribute to every image you want to lazy load.\n\n```html\n\n```\n\nThere's more information about native lazy loading in [this web.dev article](https://web.dev/native-lazy-loading/), and in this [CSSTricks article](https://css-tricks.com/a-native-lazy-load-for-the-web-platform/).\n\n##### Lazy-loading (Interaction Observer)\n\nLazy loading can be done with an Interaction Observer. The best way to do this is with a library (we recommend [Lozad.js](https://apoorv.pro/lozad.js/)), but you might also want to roll your own.\n\nYou could modify the recommended code above to remove the native lazy loading support in order to create a Lozad directive.\n\nHere's a [CSSTricks article](https://css-tricks.com/lozad-js-performant-lazy-loading-images/) about using Lozad.js, and [another one](https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/) about rolling your own lazy loading\n\n##### Lazy-loading (Event Listener)\n\nThe last way to implement lazy loading is to use an event listener. This is not recommended these days due to performance concerns, which have been solved by other solutions (the previous solutions mentioned above).\n\nIf you'd still like to use an event listener, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use vue-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset` by changing some configuration settings:\n\n```html\n\n```\n\nThe same configuration is available for `ix-src` components.\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n### Advanced Examples\n\nFor advanced use cases which go above the basic usage outlined above, such as lazy loading, or integration with other components or libraries, this library provides a set of low-level APIs.\n\n#### buildUrlObject\n\nThis function is provided a convenient way to generate values to pass to the src and srcset attributes.\n\nIn a component:\n\n```html\n\n\n\n```\n\n#### buildUrl\n\nIn addition to the helper above, we provide `buildURL` from @imgix/js-core to help developers to create any URL they need.\n\n```html\n\n\n\n```\n\n#### buildSrcSet\n\nWe also provide `buildSrcSet` from @imgix/js-core to help developers to create any srcset URL they need.\n\n```html\n\n\n\n```\n\n#### Custom Attribute Mapping\n\nIn some situations, you might want to pass the generated src and srcset to other attributes, such `data-src`. You can do that like this:\n\n```html\n\n```\n\nWhich will generate HTML as follows:\n\n```html\n\n```\n\n#### Custom Srcset Width\n\nIn situations where specific widths are desired when generating `srcset` pairs, a user can specify them by passing an array of positive integers as `widths` to the third options object:\n\n```js\nconst { srcset } = buildUrlObject(\n 'image.jpg',\n {},\n {\n widths: [100, 500, 1000, 1800],\n },\n);\n```\n\nWill generate the following `srcset` of width pairs:\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=1000 1000w,\nhttps://assets.imgix.net/image.jpg?w=1800 1800w\n```\n\n**Note:** that in situations where a `srcset` is being rendered as a [fixed image](#fixed-image-rendering), any custom `widths` passed in will be ignored. Additionally, if both `widths` and a `widthTolerance` are passed to the `buildSrcSet` method, the custom widths list will take precedence.\n\n#### Width Tolerance\n\nThe `srcset` width tolerance dictates the maximum tolerated size difference between an image's downloaded size and its rendered size. For example: setting this value to 0.1 means that an image will not render more than 10% larger or smaller than its native size. In practice, the image URLs generated for a width-based srcset attribute will grow by twice this rate. A lower tolerance means images will render closer to their native size (thereby increasing perceived image quality), but a large srcset list will be generated and consequently users may experience lower rates of cache-hit for pre-rendered images on your site.\n\nBy default this rate is set to 8 percent, which we consider to be the ideal rate for maximizing cache hits without sacrificing visual quality. Users can specify their own width tolerance by providing a positive scalar value as `widthTolerance` to the third options object:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { widthTolerance: 0.2 },\n);\n```\n\nIn this case, the `width_tolerance` is set to 20 percent, which will be reflected in the difference between subsequent widths in a srcset pair:\n\n\n```html\nhttps://assets.imgix.net/image.jpg?w=100 100w,\nhttps://assets.imgix.net/image.jpg?w=140 140w,\nhttps://assets.imgix.net/image.jpg?w=196 196w, \n ...\nhttps://assets.imgix.net/image.jpg?w=8192 8192w\n```\n\n\n#### Minimum and Maximum Width Ranges\n\nIn certain circumstances, you may want to limit the minimum or maximum value of the non-fixed `srcset` generated by the `buildUrlObject()` or `buildSrcSet()` methods. To do this, you can pass in an options object as a third argument, providing positive integers as `minWidth` and/or `maxWidth` attributes:\n\n```js\nconst { srcset } = client.buildUrlObject(\n 'image.jpg',\n {},\n { minWidth: 500, maxWidth: 2000 },\n);\n```\n\nWill result in a smaller, more tailored srcset.\n\n```html\nhttps://assets.imgix.net/image.jpg?w=500 500w,\nhttps://assets.imgix.net/image.jpg?w=580 580w,\nhttps://assets.imgix.net/image.jpg?w=672 672w,\nhttps://assets.imgix.net/image.jpg?w=780 780w,\nhttps://assets.imgix.net/image.jpg?w=906 906w,\nhttps://assets.imgix.net/image.jpg?w=1050 1050w,\nhttps://assets.imgix.net/image.jpg?w=1218 1218w,\nhttps://assets.imgix.net/image.jpg?w=1414 1414w,\nhttps://assets.imgix.net/image.jpg?w=1640 1640w,\nhttps://assets.imgix.net/image.jpg?w=1902 1902w,\nhttps://assets.imgix.net/image.jpg?w=2000 2000w\n```\n\nRemember that browsers will apply a device pixel ratio as a multiplier when selecting which image to download from a `srcset`. For example, even if you know your image will render no larger than 1000px, specifying `options: { max_srcset: 1000 }` will give your users with DPR higher than 1 no choice but to download and render a low-resolution version of the image. Therefore, it is vital to factor in any potential differences when choosing a minimum or maximum range.\n\n**Note:** that according to the [imgix API](https://docs.imgix.com/apis/url/size/w), the maximum renderable image width is 8192 pixels.\n\n#### Base64 Encoding\n\nAll imgix parameter values (with the exception of auto and ch) can be encoded using a URL-safe Base64 scheme. This client library has automatic base64 encoding for any imgix parameter that ends in 64. For example, to encode `txt`, just use `txt64`.\n\n```html\n\n```\n\nbecomes:\n\n```html\n\n```\n\n## What Is the `ixlib` Param on Every Request?\n\nFor security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.\n\nTo disable this, set `includeLibraryParam` to false when initializing `VueImgix`.\n\n```js\nimport Vue from 'vue';\nimport VueImgix from 'vue-imgix';\n\nVue.use(VueImgix, {\n domain: \"\",\n includeLibraryParam: false,\n});\n```\n\n## Code of Conduct\n\nimgix is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form.\n\nThis code of conduct applies to all imgix sponsored spaces both online and off, including our open-source projects. Anyone who violates this code of conduct may be sanctioned or expelled from these spaces at the discretion of the imgix Anti-Abuse Team (codeofconduct@imgix.com).\n\n[Our full Code of Conduct can be found here.](https://github.com/imgix/code-of-conduct)\n\n## Contributors\n\nContributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the [contributing documentation](CONTRIBUTING.md).\n\n\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n
\"\"/
Frederick Fogerty
💻 📖 🚧
\n\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Fvue-imgix?ref=badge_large)\n","readmeFilename":"README.md"}