#Image error

56 messages · Page 1 of 1 (latest)

mossy schooner
cyan jasperBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

soft dragon
#

you need to configure nextjs to use remote urls

mossy schooner
soft dragon
mossy schooner
#

i have already configured everything

# 
/**
 * NEXT.JS CONFIGURATION FILE
 * ==========================
 */

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa")({
  register: true,
  dest: "public",
  disable: process.env.NODE_ENV == "development",
});

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true" ? true : false,
  openAnalyzer: false,
});

const nextConfig = {
  async headers() {
    return [
      {
        source: "https://api.topiclist.xyz/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,DELETE,PATCH,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

module.exports = withBundleAnalyzer(
  withPWA({
    swcMinify: true,
    compress: true,
    optimizeFonts: true,
    images: {
      formats: ["image/avif", "image/webp"],
      dangerouslyAllowSVG: true,
      unoptimized: true,
      remotePatterns: [
        {
          protocol: "https",
          hostname: "cdn.topiclist.xyz",
          pathname: "/images/**",
        },
        {
          protocol: "https",
          hostname: "beta.cordx.lol",
        },
      ],
      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
      imageSizes: [16, 32, 48, 64, 96, 100, 128, 150, 256, 384],
    },
    env: {
      apiUrl: process.env.apiUrl,
    },
  }),
);
#

here is my full next.config.js

soft dragon
mossy schooner
soft dragon
mossy schooner
#

im 100% sure

soft dragon
mossy schooner
#

oki

#

hiya its fixed but now another error lol

soft dragon
#

it needs a numeric value

mossy schooner
#

ohyeah sorry

mossy schooner
soft dragon
#

set it to width={100} and height={100}

mossy schooner
#

still the same

soft dragon
#

try to search for 0px in your file

mossy schooner
#

its in many place lol

soft dragon
mossy schooner
soft dragon
#

please create a reproduction repository

mossy schooner
#

thats a really hard task

mossy schooner
#

and that also depend on another and cycle goes on

soft dragon
mossy schooner
#

oki

mossy schooner
soft dragon
#

if not

#

then I think you should create an issue on nextjs repo

mossy schooner
#

@soft dragon i removed all things containing

#

so in theory

#

the error should be gone

soft dragon
#

then I think it is a bug with nextjs and you can create an issue

mossy schooner
#

even thoall mention to the url