fix(site): allow for remote images (#7769)

Author: mhartington

apps/site/next.config.mjs

@@ -20,6 +20,14 @@ const BLOG_ORIGIN_HOST = (() => {
   }
 })();
 
+const imageRemoteHostnames = [
+  "cdn.sanity.io",
+  "prisma.io",
+  "www.prisma.io",
+  DOCS_ORIGIN_HOST,
+  BLOG_ORIGIN_HOST,
+];
+
 if (
   process.env.NODE_ENV === "production" &&
   (!process.env.NEXT_DOCS_ORIGIN || !process.env.NEXT_BLOG_ORIGIN)
@@ -246,12 +254,10 @@ const config = {
   reactStrictMode: true,
   images: {
     unoptimized: false,
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "cdn.sanity.io",
-      },
-    ],
+    remotePatterns: imageRemoteHostnames.map((hostname) => ({
+      protocol: "https",
+      hostname,
+    })),
   },
   transpilePackages: ["@prisma/eclipse"],
   async redirects() {

apps/site/src/components/support/search.tsx

@@ -59,7 +59,7 @@ function SearchResultItem({ item, onClick }: SearchResultItemProps): ReactNode {
       <div className="relative aspect-video w-full overflow-hidden rounded-square bg-background-neutral">
         {post.heroImagePath ? (
           <Image
-            src={withSiteBasePathForImageSrc(post.heroImagePath)}
+            src={post.heroImagePath}
             alt={post.content}
             fill
             sizes="(min-width: 640px) 160px, 128px"