Firebase storage image not displaying in nextjs application

Question

I am using the Next.js template from Vercel and just trying to replace the logo image at the bottom with one that is stored in Firebase storage. I have configured the next.config.js and it does not throw an error but the image is not displayed. It is only showing the image missing placeholder with alt text. This is my next.config.js

/**

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

*/
const nextConfig = {

  images: {
  
  domains: ['firebasestorage.googleapis.com'],
  
  },
  
};
  
  
module.exports = nextConfig;

I can also access the image in my browser.

EDIT 14/08/21**

When I replace the nextjs image tag with a standard html tag the image does load so it seems to be some issue with next.

Answer 1

Yes I got the same issue and sloved by chagning image tag from NextJs tag to normal html tag. this will work, yes you will get an eslint warning but you don't have other opitons Hope this might help

Answer 2

I solved it using the 'unoptimized' property in nextjs

                <Image
                    src={item?.categoryImageUrl ?? placeholderImage}
                    alt={item?.categoryName || t("text-card-thumbnail")}
                    width={imageSize}
                    height={imageSize}
                    // quality={100}
                    unoptimized
                    className={`object-cover bg-gray-300 ${
                        variant === "rounded"
                            ? "rounded-md"
                            : "rounded-full"
                    }`}
                />

Read more about this at nextjs unoptimized