SVG media are 404

[diramazioni]

If I build for production uploaded SVG are not found anymore and points to different urls: ie regular uploaded images: <img srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fdiram_logo_2_ef0f07c073.png&amp;w=640&amp;q=75 1x, /_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fdiram_logo_2_ef0f07c073.png&amp;w=828&amp;q=75 2x" src="/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fdiram_logo_2_ef0f07c073.png&amp;w=828&amp;q=75"> svg files: <img src="http://localhost:1337/uploads/eli_web_b0f6db5a4c.svg" >

(Omiitted other tags for brevity) In dev works because localhost is localhost I guess

next/image does work with SVG if I hardcore the import in /public.

What can I do? This problem really caught me with the website already online...

[diramazioni]

I've modified next.config.js to point the images to my domain name but still the url of uploaded svg points to localhost

[diramazioni]

I was able to make it work changing next.config.js this way, however is not optimal because the svg get "optimezed" . I don't know why but remotePatterns: doesn't change my url to the domain url. I'll ask for help to next.js

/** @type {import('next').NextConfig} */

const nextConfig  =  {
  experimental: {
    appDir: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'api.example.net',
        pathname: '/uploads/**',
      },
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '1337',
        pathname: '/uploads/**',
      } 
    ],
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", 
  },
}

module.exports = nextConfig;

[PaulBratslavsky]

I am closing this for now to clean up the issues, since this seems more of a Next JS issue. If you do get the answer you can share here.