Images stored in Firebase Storage are not appearing on my Next.js application

I've been using the Next.js template from Vercel and attempting to switch out the logo image at the bottom with one stored in Firebase storage. Although I have configured the next.config.js file without any errors, the image does not appear on the page—it only displays a placeholder with alt text. Here's an example of my next.config.js:

/**

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

*/
const nextConfig = {

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

In addition, I am able to access the image directly through my browser.

**EDIT 14/08/21**

Interestingly, when I replace the nextjs image tag with a standard HTML img tag, the image loads properly, indicating there may be an issue specific to Next.js.

firebasenext.jsfirebase-storage

Answer №1

I managed to solve the issue by utilizing the 'unoptimized' feature 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"
                    }`}
                />

To learn more about this, visit nextjs unoptimized

Answer №2

I encountered a similar issue and was able to resolve it by changing the image tag from NextJs tag to a regular HTML tag. Although this solution may trigger an eslint warning, it seems to be the only viable option in such cases. Hope this information proves helpful for others facing the same problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the 500 response code when making a request to the NextJS API route within the app directory?

Every time I attempt to access my API route, a 500 Internal Server Error code is returned The origin of the request export const fetchSuggestion = async () => { const response = await fetch('/api/getSuggestion', { cache: 'no-store&ap ...

javascriptnode.jsnext.jsserver-side-renderingnext.js13

Cached images do not trigger the OnLoad event

Is there a way to monitor the load event of my images? Here's my current approach. export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => { const alt = useMemo(() => initial ...

javascriptreactjstypescripteventsnext.js

The deployment is being effortlessly conquered by React-HTML-Parser

I am encountering an issue while trying to deploy my next app on vercel, as the react-html-parser is causing errors. I considered downloading an older version of React, but there are other dependencies that require the latest version. Is there a solution ...

reactjsnext.jshtml-parsinghtml-parser

What is the process for turning off route pre-rendering in Next.js?

I've been implementing route handlers in my project. One of the routes I have is located at app/blog/rss.xml/route.ts: import { getBlogPosts } from '@/routines/getBlogPosts.ts'; import Rss from 'rss'; const SITE_URL = 'https ...

next.jsnext.js13

Error during Next.js compilation, undefined property

On the index page, there are components that display ads. const App = ({ads}) => ( { (ads.items===undefined) ? <></> : ads.items.map(item => <Ad item={item} key={item.postingId} id={item.postingId}/>) } ) export async function g ...

reactjsnext.js

Can a loading screen be implemented during DOM rendering in a Next.js application?

I need help figuring out how to implement a loading screen when the DOM is loading in my Next.js app. In pure React, I achieved this by adding another div with a loading screen in /public/index.html and disabling it when the last element loaded. Any sug ...

reactjsnext.js

Tips on utilizing the useState hook for storing numerous key objects?

Currently, I am working with a candlestick chart for a cryptocurrency that displays data over different timeframes such as 1 minute and 30 minutes. Below is the code snippet that sets the initial state to show a 1-hour chart when a user first visits: const ...

javascriptreactjsnext.js

What is the Next.js equivalent of routing with rendering capability for nested component paths?

I am new to Next.js and so far have been loving the experience. I'm a bit stuck on how to achieve the equivalent of the following code in Next.js These are all client-side routes that render nested components on the user page. The value of ${currentP ...

javascriptreactjsreact-routernext.js

Getting Errors When Retrieving Data with Apostrophe Symbol ' in Node.js

I am currently developing a Next.js API page to extract data from a series of URLs. Interestingly, the URLs containing an apostrophe character ' fail to return any data, while those without it work perfectly fine. Surprisingly, when I execute the same ...

javascriptnode.jsnext.jsfetch

Guide to setting up Firebase Admin to initialize application based on request environment

Currently working on a React Native application with 3 variants: development, staging, and production. I only have two Firebase projects, one for production and the other for development/staging purposes. I have an Express server that utilizes the Firebas ...

node.jsfirebaseexpressfirebase-admin

Incorporate a file into all API endpoints with Next.js API functionality

Is there a way to incorporate a "bootstrap" file (a file with side-effects) as the first file included in all Next.js APIs? The main issue is that I have a Winston logger in a file that needs to be added to every API endpoint, but this process hinders dev ...

javascriptnext.js

Is it possible to extract individual values from the outcome of an SWR query using destructuring?

I'm encountering a simple issue with calling an external API: const fetcher = (...args) => fetch(...args).then(x=>x.json()) const {data:{results}, error} = useSWR("https://xxxxxxxxxxxxxxxx",fetcher) Every time I attempt to destructu ...

reactjsnext.jsundefinedswrdestructure

Hydration Error arises when Next.js SSG Suspense is triggered

My static site is encountering an issue when trying to display a simple list of items retrieved from Supabase. Everything was working fine in React 17, but after upgrading to React 18, I am now getting sporadic errors and the fallback doesn't consiste ...

reactjsnext.jsswr

Reference to a field within a Firestore document

Having trouble with a firestore field reference to a document I created. Can't refer to the fields, only the id. Tried multiple solutions but no luck. Any tips on what the issue might be? Thank you //Get single reference exports.getSingle = (req, res ...

node.jsfirebasegoogle-cloud-firestore

Design a component to display on the main component, which can be activated by a function within another component

I am looking to create a custom DeleteModal component in my Next.js project. I am aiming for something similar to sonner import { Toaster, toast } from 'sonner' //I want to import Toaster into layout.js to render and use toast.success() in diffe ...

reactjsnext.js

Ways to utilize Pub / Sub Notifications for Cloud Storage

In order to utilize Pub/Sub Notifications for Cloud Storage, I am working with storage files on Firebase and need to perform various processes. These processes result in additional data being stored in different fields on Firebase. However, there are insta ...

node.jsreactjsfirebasegoogle-cloud-platformgoogle-cloud-pubsub

Using conditional CSS in React/Next.js

While using Next.js, I have implemented conditional rendering on components successfully. However, I am facing an issue where the CSS styles differ between different components. Code 1: import React from "react"; import Profile from "../../ ...

javascriptcssreactjsnext.js

Having trouble retrieving the NextAuth session data within Next.js 12 middleware

I've been working on implementing route protection using Next.js 12 middleware function, but I keep encountering an issue where every time I try to access the session, it returns null. This is preventing me from getting the expected results. Can anyon ...

javascriptnext.jsmiddleware

Learn how to properly implement cookies in a fetch request within Nextjs

Here is a code snippet to consider: Index.getInitialProps = async function({req}) { const res = await fetch("http://localhost/api/tiles"); const json = await res.json(); } If the /api/tiles endpoint requires access to the uid cookie from the user, t ...

javascriptreactjscookiesnext.jsreact-cookie

An error occurred as the Serverless Function timed out while attempting to load a dynamic route in Next.js version 13

I have a basic Next.js application with the following route structure: /contentA/ - Static - Initial load: 103 kB /contentA/[paramA]/groups - SSG - Initial load: 120 kB /contentB/[paramA]/[paramB]/[paramC] - SSR (client component) - Initial load: 103 kB ...

javascriptreactjstypescriptnext.jsreact-server-components