Image error

Unanswered

ℛ𝒶𝓃 posted this in #help-forum

2024-01-28T08:29:22.000Z

Hiya there im on Nextjs V14 with chakra ui version 2.2.1 and I'm having some errors

So this is how im using the library rn https://cordx.lol/users/787241442770419722/hSRpizfL.png and btw the next/image is already import. but it gives me error - https://cordx.lol/users/787241442770419722/6n8o2Qrn.png

55 Replies

@ℛ𝒶𝓃 Hiya there im on Nextjs V14 with chakra ui version 2.2.1 and I'm having some errors So this is how im using the library rn https://cordx.lol/users/787241442770419722/hSRpizfL.png and btw the next/image is already import. but it gives me error - https://cordx.lol/users/787241442770419722/6n8o2Qrn.png

@ts-ignore

2024-01-28T08:51:36.000Z

https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images

you need to configure nextjs to use remote urls

@@ts-ignore https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images

ℛ𝒶𝓃OP

2024-01-28T08:52:18.000Z

like?

@ℛ𝒶𝓃 like?

@ts-ignore

2024-01-28T08:53:04.000Z

read the docs

@@ts-ignore read the docs

ℛ𝒶𝓃OP

2024-01-28T08:53:58.000Z

but

i have already configured everything

https://cordx.lol/users/787241442770419722/YHC05t2a.png

/**
 * 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,
    },
  }),
);