Image emded url not pointing to Strapi Uploads URL in Next.js- Broken image links

[da-kicks-87]

Hello,

When i upload an image from Strapi Media Libray and the view my Next.js front end, I see broken image links. I check the link and it is going to to my Next.js url (http://localhost:3000) becasue of the relative path (/uploads/image-file_name_2133913322.png. My local Strapi env is at path http://localhost:1337.

How do I get it to work on my local env?

[0ndt]

You can use redirects in your next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/uploads/:path*',
        destination: `http://localhost:1337/uploads/:path*`,
        permanent: true,
      },
    ]
  },
}
module.exports = nextConfig

[HackMEAny]

You can add the url parameter in Strapi "config\server.js" url -> Backend Link

config\server.js

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'http://127.0.0.1:1337',
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});

After this you can access the Strapi admin panel from -> http://127.0.0.1:1337/admin