diff --git a/docs/image-cdn.md b/docs/image-cdn.md index 36fc6fcd..efe94834 100644 --- a/docs/image-cdn.md +++ b/docs/image-cdn.md @@ -9,8 +9,8 @@ all plans. ## Enabling the Image CDN To enable the Image CDN, you should set the environment variable -`NETLIFY_IMAGE_CDN` to `true`. You will also need to declare allowed image URL -patterns in `netlify.toml`: +`NETLIFY_IMAGE_CDN` to `true`. You will also need to declare allowed remote +image regular expression patterns in `netlify.toml`: ```toml [build.environment] @@ -18,12 +18,12 @@ NETLIFY_IMAGE_CDN = "true" [images] remote_images = [ - 'https://example1.com/*', - 'https://example2.com/*' + '^https:\\/\\/example1\\.com\\/.*', + '^https:\\/\\/example2\\.com\\/.*' ] ``` -Exact URL patterns to use will depend on CMS you use and possibly your +Exact remote image pattern to use will depend on CMS you use and possibly your configuration of it. - `gatsby-source-contentful`: @@ -33,7 +33,7 @@ configuration of it. remote_images = [ # is specified in the `spaceId` option for the # gatsby-source-contentful plugin in your gatsby-config file. - "https://images.ctfassets.net//*" + "^https:\\/\\/images\\.ctfassets\\.net\\/\\/.*" ] ``` @@ -44,7 +44,7 @@ configuration of it. remote_images = [ # is speciafied in the `baseUrl` option for the # gatsby-source-drupal plugin in your gatsby-config file. - "/*" + "^\\/.*" ] ``` @@ -56,7 +56,7 @@ configuration of it. # is specified in the `url` option for the # gatsby-source-wordpress plugin in your gatsby-config file. # There is no need to include `/graphql in the path here` - "/*" + "^\\/.*" ] ``` @@ -64,6 +64,13 @@ Above examples are the most likely ones to be needed. However if you configure your CMS to host assets on different domain or path, you might need to adjust the patterns accordingly. +Keep in mind that you will need to escape special regular expression symbols to +avoid creating too permisible patterns: + +- `.` should be escaped as `\\.` (dot) +- `/` should be escaped as `\\/` (slash) +- your rule should start with `^` so domain matching is exact + ## How it works When using the Image CDN, Gatsby generates URLs of the form