Theo's Typesafe Cult•2y ago

Image url from s3 as next page

How can I create a proxy page component so to say to view my files from my s3 bucket inside my webapp, so I don't need to open the files using the s3 url. So I would pass the presigned url from my backend to my component page I guess, which I already created inside

pages/file/[id].tsx

pages/file/[id].tsx

The basic setup looks like this

import { useRouter } from 'next/router';

const FilePage = () => {
  const router = useRouter();
  const { src } = router.query;

  return (
    <>
      
    </>
  );
};

export default FilePage;

import { useRouter } from 'next/router';

const FilePage = () => {
  const router = useRouter();
  const { src } = router.query;

  return (
    <>
      
    </>
  );
};

export default FilePage;

But now I am not sure how to proceed

2 Replies

utdev•2y ago

Right now I can do this

/**
 * Generated a proxy component to view files from an s3 bucket.
 */
import { useRouter } from 'next/router';

const FilePage = () => {
  const router = useRouter();
  const { url } = router.query;

  // show the image from the url
  return <img src={url} />;
};

export default FilePage;

/**
 * Generated a proxy component to view files from an s3 bucket.
 */
import { useRouter } from 'next/router';

const FilePage = () => {
  const router = useRouter();
  const { url } = router.query;

  // show the image from the url
  return <img src={url} />;
};

export default FilePage;

Url contains the image from my bucket but it does not show up, I wonder if I have to show the file form the server side

amanuel•2y ago

Sorry for tagging: @nexxel I believe he knows ^^

Gaming

Programming

Image url from s3 as next page