Add err.sh for missing images domain (#18325)

* Add err.sh for missing images domain

* Apply suggestions from code review

Co-authored-by: Steven <steven@ceriously.com>

* Update test

Co-authored-by: Steven <steven@ceriously.com>

Author: ijjk

errors/next-image-unconfigured-host.md

@@ -0,0 +1,22 @@
+# next/image Un-configured Host
+
+#### Why This Error Occurred
+
+On one of your pages that leverages the `next/image` component, you passed a `src` value that uses a `hostname` in the URL that isn't defined in the `images` config in `next.config.js`.
+
+#### Possible Ways to Fix It
+
+Add the `hostname` to your `images` config in `next.config.js`:
+
+```js
+// next.config.js
+module.exports = {
+  images: {
+    domains: ['assets.example.com'],
+  },
+}
+```
+
+### Useful Links
+
+- [Image Optimization Documetnation](https://nextjs.org/docs/basic-features/image-optimization)

packages/next/client/image.tsx

@@ -431,13 +431,14 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
       } catch (err) {
         console.error(err)
         throw new Error(
-          `Failed to parse "${src}" if using relative image it must start with a leading slash "/" or be an absolute URL`
+          `Failed to parse "${src}" in "next/image", if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
         )
       }
 
       if (!configDomains.includes(parsedSrc.hostname)) {
         throw new Error(
-          `Invalid src prop (${src}) on \`next/image\`, hostname is not configured under images in your \`next.config.js\``
+          `Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` +
+            `See more info: https://err.sh/nextjs/next-image-unconfigured-host`
         )
       }
     }

test/integration/image-component/default/test/index.test.js

@@ -117,7 +117,7 @@ function runTests(mode) {
 
       await hasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
-        'Invalid src prop (https://google.com/test.png) on `next/image`, hostname is not configured under images in your `next.config.js`'
+        'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`'
       )
     })
   }