Merge pull request #1085 from CodeForAfrica/fix/fix-image-paths

Transform Media paths

Author: kelvinkipruto

apps/climatemappedafrica/src/payload/collections/Media.js

@@ -1,3 +1,5 @@
+import transformDocMediaUrl from "../utils/transformDocMediaUrl";
+
 const Media = {
   slug: "media",
   admin: {
@@ -22,7 +24,7 @@ const Media = {
     },
   ],
   hooks: {
-    afterRead: [({ doc }) => ({ ...doc, src: doc.url })],
+    afterRead: [({ doc }) => transformDocMediaUrl(doc)],
   },
 };
 

apps/climatemappedafrica/src/payload/utils/transformDocMediaUrl.js

@@ -0,0 +1,13 @@
+const transformDocMediaUrl = (doc) => {
+  // Can't use absolute URLs in src because we set PAYLOAD_PUBLIC_APP_URL to localhost at build-time & will lead to 404 at runtime
+  // Solution: use relative URLs
+  const { pathname } = new URL(doc.url);
+  return {
+    ...doc,
+    alt: doc.alt ?? null,
+    src: pathname,
+    url: pathname,
+  };
+};
+
+export default transformDocMediaUrl;