[{"_path":"/providers/unsplash","_draft":false,"_partial":false,"_empty":false,"title":"Unsplash","description":"Nuxt Image has first class integration with Unsplash","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://unsplash.com/documentation#dynamically-resizable-images","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Unsplash"}]},{"type":"text","value":" and the image module. See [Unsplash License](Unsplash photos are made to be used freely.) for what usage is permitted."}]},{"type":"element","tag":"h2","props":{"id":"dynamically-resizable-images"},"children":[{"type":"text","value":"Dynamically resizable images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every image returned by the Unsplash API is a dynamic image URL, which means that it can be manipulated to create new transformations of the image by simply adjusting the query parameters of the image URL."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This enables resizing, cropping, compression, and changing the format of the image in realtime client-side, without any API calls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Under the hood, Unsplash uses "},{"type":"element","tag":"a","props":{"href":"/providers/imgix"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":", a powerful image manipulation service to provide dynamic image URLs."}]},{"type":"element","tag":"h2","props":{"id":"supported-parameters"},"children":[{"type":"text","value":"Supported parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unsplash officially support the parameters:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w, h"}]},{"type":"text","value":": for adjusting the width and height of a photo\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": for applying cropping to the photo\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fm"}]},{"type":"text","value":": for converting image format\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":": for automatically choosing the optimal image format depending on user browser\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"q"}]},{"type":"text","value":": for changing the compression quality when using lossy file formats\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": for changing the fit of the image within the specified dimensions\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dpr"}]},{"type":"text","value":": for adjusting the device pixel ratio of the image\nThe other parameters offered by Imgix can be used, but we don’t officially support them and may remove support for them at any time in the future."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"💫 Tip\nThe API returns image URLs containing an ixid parameter. All resizing and manipulations of image URLs must keep this parameter as it allows for your application to report photo views and be compliant with the API Guidelines."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://unsplash.com/documentation#dynamically-resizable-images","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Unsplash"}]},{"type":"text","value":" and the image module. See [Unsplash License](Unsplash photos are made to be used freely.) for what usage is permitted."}]},{"type":"element","tag":"h2","props":{"id":"dynamically-resizable-images"},"children":[{"type":"text","value":"Dynamically resizable images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every image returned by the Unsplash API is a dynamic image URL, which means that it can be manipulated to create new transformations of the image by simply adjusting the query parameters of the image URL."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This enables resizing, cropping, compression, and changing the format of the image in realtime client-side, without any API calls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Under the hood, Unsplash uses "},{"type":"element","tag":"a","props":{"href":"/providers/imgix"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":", a powerful image manipulation service to provide dynamic image URLs."}]},{"type":"element","tag":"h2","props":{"id":"supported-parameters"},"children":[{"type":"text","value":"Supported parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unsplash officially support the parameters:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w, h"}]},{"type":"text","value":": for adjusting the width and height of a photo\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": for applying cropping to the photo\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fm"}]},{"type":"text","value":": for converting image format\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":": for automatically choosing the optimal image format depending on user browser\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"q"}]},{"type":"text","value":": for changing the compression quality when using lossy file formats\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": for changing the fit of the image within the specified dimensions\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dpr"}]},{"type":"text","value":": for adjusting the device pixel ratio of the image\nThe other parameters offered by Imgix can be used, but we don’t officially support them and may remove support for them at any time in the future."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"💫 Tip\nThe API returns image URLs containing an ixid parameter. All resizing and manipulations of image URLs must keep this parameter as it allows for your application to report photo views and be compliant with the API Guidelines."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"dynamically-resizable-images","depth":2,"text":"Dynamically resizable images"},{"id":"supported-parameters","depth":2,"text":"Supported parameters"}]}},"_type":"markdown","_id":"content:4.providers:unsplash.md","_source":"content","_file":"4.providers/unsplash.md","_extension":"md"},{"_path":"/advanced/custom-provider","_draft":false,"_partial":false,"_empty":false,"title":"Custom Providers","description":"If CDN provider is not supported, you can define it yourself.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"provider-entry"},"children":[{"type":"text","value":"Provider Entry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a url for optimized images, and needs to be isomorphic because it may be called on either server or client."}]},{"type":"element","tag":"code","props":{"code":"import { joinURL } from 'ufo'\n// import {} from '~image'\n\nexport function getImage(src, { modifiers, baseURL } = {}, { options, nuxtContext, $img }) {\n  const { width, height, format, fit, ...providerModifiers } = modifiers\n  const operations = []\n  // process modifiers\n  const operationsString = operations.join(',')\n  return {\n    url: joinURL(baseURL, operationsString, src)\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { joinURL } from 'ufo'\n// import {} from '~image'\n\nexport function getImage(src, { modifiers, baseURL } = {}, { options, nuxtContext, $img }) {\n  const { width, height, format, fit, ...providerModifiers } = modifiers\n  const operations = []\n  // process modifiers\n  const operationsString = operations.join(',')\n  return {\n    url: joinURL(baseURL, operationsString, src)\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"children":[{"type":"text","value":"Parameters"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": Source path of the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": List of image modifiers that are defined in the image component or as a preset."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ctx"}]},{"type":"text","value":": ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ImageCTX"}]},{"type":"text","value":") Image module runtime context"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"CreateImageOptions"}]},{"type":"text","value":") Image module global runtime options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxtContext"}]},{"type":"text","value":": "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/internals-glossary/context/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt runtime context"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":": The "},{"type":"element","tag":"a","props":{"href":"/api/$img"},"children":[{"type":"text","value":"$img helper"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Values in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ctx"}]},{"type":"text","value":" might change. Use it with caution."}]},{"type":"element","tag":"h3","props":{"id":"return"},"children":[{"type":"text","value":"Return"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"url"}]},{"type":"text","value":": Absolute or relative url of optimized image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isStatic"}]},{"type":"text","value":": A boolean value that determines whether the image should generate on static generation or not. If it is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" during "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt generate"}]},{"type":"text","value":" this image will be downloaded and saved in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"generate.outDir"}]},{"type":"text","value":" to be served as a static image."}]}]},{"type":"element","tag":"h2","props":{"id":"use-your-provider"},"children":[{"type":"text","value":"Use your provider"}]},{"type":"element","tag":"h3","props":{"id":"register-provider"},"children":[{"type":"text","value":"Register provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After you create your own provider, you should register it in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":". In order to do that create a property inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image.provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  ...\n  image: {\n    providers: {\n      customProvider: {\n        name: 'customProvider', // optional value to overrider provider name\n        provider: '~/providers/custom', // Path to custom provider\n        options: {\n          // ... provider options\n        }\n      }\n    }\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  ...\n  image: {\n    providers: {\n      customProvider: {\n        name: 'customProvider', // optional value to overrider provider name\n        provider: '~/providers/custom', // Path to custom provider\n        options: {\n          // ... provider options\n        }\n      }\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are plenty of useful utilities that can be used to write providers by importing from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~img"}]},{"type":"text","value":". See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/tree/dev/src/runtime/providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"src/runtime/providers"}]},{"type":"text","value":" for more info."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"provider-entry"},"children":[{"type":"text","value":"Provider Entry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a url for optimized images, and needs to be isomorphic because it may be called on either server or client."}]},{"type":"element","tag":"code","props":{"code":"import { joinURL } from 'ufo'\n// import {} from '~image'\n\nexport function getImage(src, { modifiers, baseURL } = {}, { options, nuxtContext, $img }) {\n  const { width, height, format, fit, ...providerModifiers } = modifiers\n  const operations = []\n  // process modifiers\n  const operationsString = operations.join(',')\n  return {\n    url: joinURL(baseURL, operationsString, src)\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"joinURL"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-032670"},"children":[{"type":"text","value":"'ufo'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e497ad"},"children":[{"type":"text","value":"// import {} from '~image'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-767f07"},"children":[{"type":"text","value":"getImage"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-7d7151"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" {}, { "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"nuxtContext"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" }) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", ..."}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"providerModifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-7d7151"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"operations"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d7151"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" []"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e497ad"},"children":[{"type":"text","value":"// process modifiers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"operationsString"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d7151"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8dcfbb"},"children":[{"type":"text","value":"operations"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-767f07"},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-032670"},"children":[{"type":"text","value":"','"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-767f07"},"children":[{"type":"text","value":"joinURL"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"operationsString"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"children":[{"type":"text","value":"Parameters"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": Source path of the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": List of image modifiers that are defined in the image component or as a preset."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ctx"}]},{"type":"text","value":": ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ImageCTX"}]},{"type":"text","value":") Image module runtime context"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"CreateImageOptions"}]},{"type":"text","value":") Image module global runtime options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxtContext"}]},{"type":"text","value":": "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/internals-glossary/context/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt runtime context"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":": The "},{"type":"element","tag":"a","props":{"href":"/api/$img"},"children":[{"type":"text","value":"$img helper"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Values in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ctx"}]},{"type":"text","value":" might change. Use it with caution."}]},{"type":"element","tag":"h3","props":{"id":"return"},"children":[{"type":"text","value":"Return"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"url"}]},{"type":"text","value":": Absolute or relative url of optimized image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isStatic"}]},{"type":"text","value":": A boolean value that determines whether the image should generate on static generation or not. If it is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" during "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt generate"}]},{"type":"text","value":" this image will be downloaded and saved in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"generate.outDir"}]},{"type":"text","value":" to be served as a static image."}]}]},{"type":"element","tag":"h2","props":{"id":"use-your-provider"},"children":[{"type":"text","value":"Use your provider"}]},{"type":"element","tag":"h3","props":{"id":"register-provider"},"children":[{"type":"text","value":"Register provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After you create your own provider, you should register it in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":". In order to do that create a property inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image.provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  ...\n  image: {\n    providers: {\n      customProvider: {\n        name: 'customProvider', // optional value to overrider provider name\n        provider: '~/providers/custom', // Path to custom provider\n        options: {\n          // ... provider options\n        }\n      }\n    }\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-764664"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"providers"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"customProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-032670"},"children":[{"type":"text","value":"'customProvider'"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e497ad"},"children":[{"type":"text","value":"// optional value to overrider provider name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-032670"},"children":[{"type":"text","value":"'~/providers/custom'"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e497ad"},"children":[{"type":"text","value":"// Path to custom provider"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-392f86"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-e497ad"},"children":[{"type":"text","value":"// ... provider options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-23bb3a"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are plenty of useful utilities that can be used to write providers by importing from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~img"}]},{"type":"text","value":". See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/tree/dev/src/runtime/providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"src/runtime/providers"}]},{"type":"text","value":" for more info."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8dcfbb{color:#E5C07B}.ct-7d7151{color:#56B6C2}.ct-767f07{color:#61AFEF}.ct-e497ad{color:#7F848E}.ct-032670{color:#98C379}.ct-392f86{color:#E06C75}.ct-23bb3a{color:#ABB2BF}.ct-764664{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"provider-entry","depth":2,"text":"Provider Entry","children":[{"id":"parameters","depth":3,"text":"Parameters"},{"id":"return","depth":3,"text":"Return"}]},{"id":"use-your-provider","depth":2,"text":"Use your provider","children":[{"id":"register-provider","depth":3,"text":"Register provider"}]}]}},"_type":"markdown","_id":"content:5.advanced:1.custom-provider.md","_source":"content","_file":"5.advanced/1.custom-provider.md","_extension":"md"}]