CODEWITHSUNDEEP
firebasenext.jsfirebase-storage
simon
simon

Reputation: 11

Firebase storage image not displaying in nextjs application

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.

Upvotes: 1

Views: 2259

Answers (2)

Hrithik Tiwari
Hrithik Tiwari

Reputation: 141

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

Upvotes: 3

Hatim Fayez
Hatim Fayez

Reputation: 231

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

Upvotes: 2

Related Questions