Image attachments not being shown in production

[junaid33]

I'm self-hosting Teable on Railway and it's an amazing experience so far. We have an attachment column where users can upload a picture. I'm using the records API to get the record and I see a presignedUrl like so

https://teable-34723974.up.railway.app/api/attachments/read/private/table/78XTKo1MfRph?token=ffb51a5c7c3d9eb4ee3b941550bd3f001039a1c5efc4f9b7fde8e14dbc4d13399e90fb9628f35e444a5abb5c8f0bdd2d7fb40cc062508cf6ae342d772c901bcaf1a8cdcc4e29623e23eb9bbdae1e1042

When I use this URL to show this image, it works locally, but when deployed to Vercel, the image doesn't load for some reason. When I paste the URL directly, I see the image so not sure if CORS issue. The url has private, should that be changed to public to access?

[tea-artist]

The pre-signed URL has an expiration time(hours), and it becomes inaccessible after it expires. It is recommended that you request the latest image URL each time, and you can also use the "next Image" tag to cache the image.

[junaid33]

So I am getting the latest presignedUrl every time and not using an expired image URL. To reproduce, upload an image on Teable and use the presignedUrl in an img tag in a HTML editor. The only solution that works is to create a Next.js API route:

export default async function handler(req, res) {
  const { url } = req.query;

  if (!url) {
    return res.status(400).json({ error: 'URL parameter is required' });
  }

  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const contentType = response.headers.get('content-type');
    res.setHeader('Content-Type', contentType);

    const buffer = await response.buffer();
    res.send(buffer);
  } catch (error) {
    console.error('Error fetching image:', error);
    res.status(500).json({ error: 'Error fetching image' });
  }
}

            imageUrl = `/api/image?url=${encodeURIComponent(presignedUrl)}`;

This works, but not with the Next/Image component, only the normal img tag. It also takes forever to load since it's routing the image thru an API route and then showing it.

[tea-artist]

https://github.com/teableio/template-site/blob/main/src/app/page.tsx

For an example on the official template site, the Next Image tab uses presignedUrl directly

[tea-artist]

I may have figured out the reason, next image security policy is blocking access to external domains, you need to add a configuration:

https://github.com/teableio/template-site/blob/main/next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.your-prefix.railway.app',
      },
    ],
  },
};

export default nextConfig;