Next.js is experiencing difficulty serving dynamic images in real-time

Currently, my project uses Next.js API for the backend and MongoDB for the database. I am faced with the challenge of serving user-uploaded images at runtime, since these files were not available during build time and are not recognized as static files that can be stored in the public directory.

I attempted to use next-images, made some configurations in the next.config.js, and wrote this code: <img src={require(../../../images/${picture.src})} alt={picture.legend} />.

Unfortunately, I continue to encounter this error:https://i.stack.imgur.com/2BiK7.png.

I also tried using file-loader, but didn't have any success.

Can someone please point out what I might be overlooking?

Thank you for any assistance!

reactjsimagenext.js

Answer №1

When faced with issues related to loading images and fonts, I have found success using the following configuration:

  1. npm install url-loader --save-dev

  2. next.config.js

module.exports = {
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]',
        },
      },
    });
    return config;
  },
}

Answer №2

The public directory is specifically designed for storing static assets and not intended for dynamic content. This is why the files become readily available upon rebuilding.

This information was sourced from a discussion on Github

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

navigating a collection of objects and retrieving individual property values

I am having trouble extracting values from an array of objects, specifically only the values from the first object in each sub-array. Here is how my array of objects looks: items [ [ {id: 1, title: "title1", imgUrl: "https://someimage1"}, {id: 2 ...

javascriptreactjs

Having trouble pushing data to a GraphQL database from my Next.js application

I am currently working on developing a Reddit-like platform. To simplify the process, I have integrated SQL with graphQL using Stepzen for endpoints. Below is the code snippet of my Post Box component for the site, which includes graphQL mutations.ts and q ...

reactjstypescriptnext.jsgraphql

Tips for troubleshooting and testing the npm react-ga package (which integrates Google Analytics) before sending data

Debugging my app with this npm package has proven challenging as I am unsure if page view data is being sent to Google Analytics. There seems to be a delay in displaying the page views, so I need some way to confirm if this package is indeed sending the ...

reactjsnpmgoogle-analytics

There is an issue with types in React when using TypeScript: The type '(user: User) => Element' cannot be assigned to the type '((props: User) => any) & ReactNode'

I'm encountering an error in the terminal and need some assistance. I am not well-versed in TypeScript, so any guidance to resolve this issue would be highly appreciated. https://i.stack.imgur.com/PWATV.png The Loadable component code: import { Circ ...

reactjstypescriptmaterial-ui

Material-UI loading indicator

Trying to add a spinner to a button and facing issues with distortion. This is the initial setup: <Button .... disabled={isSubmitting} startIcon={isSubmitting ? <CircularProgress size="1rem" /> : undefined} ...

reactjsmaterial-uiweb-frontend

Unlock the power of props variable in css-modules for dynamic className styling!

Would it be feasible to utilize a props variable as a css-modules className in React? // Card.js import styles from "./Card.module.scss" const Card = ({ theme }) => <div className={`${styles.card} ${styles[theme]}`> Card Co ...

reactjscss-modulesreact-css-modules

The width of Material UI Grid decreases every time it is re-rendered

I'm attempting to display a list of 25 words in a 5x5 grid using the MUI Grid component. The grid is structured as a <Grid container direction="column"> with five <Grid item> elements. Each <Grid item> contains: <Grid co ...

javascriptcssreactjsmaterial-ui

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design toke ...

javascriptreactjsnext.jsthemesantd

Firestore in a Next.js app keeps attempting to start emulators even though it is already running

Does anyone have experience dealing with issues related to Firebase and its emulators? I keep encountering the following error during hot reload: FirebaseError: Firestore has already been started and its settings can no longer be changed. You can only mo ...

reactjsfirebasegoogle-cloud-platformnext.jsfirebase-tools

Transform the selected component in Material-UI from being a function to a class

Hello, I am currently learning about React and I have started using the select button from material-ui. The code I found on the material ui page is for a functional component, but I am more comfortable with class components. Here is the code snippet provid ...

javascriptreactjsreact-routermaterial-ui

What causes the disparity in outcomes between an API request using node-fetch versus the built-in fetch in Node.js?

I developed a node application that sends an API request to place a bet on Manifold, a fictional betting website. Using node-fetch successfully triggers the bet, but when relying on the built-in fetch function, it sometimes returns an outdated version of ...

node.jsnext.jsfetch-apinode-fetch

What is the correct way to implement "next-redux-wrapper" with "Next.js", "Redux-ToolKit" and Typescript?

Currently, I am integrating RTK (redux-toolkit) into my Next.js App. I am facing an issue while trying to dispatch an AsyncThunk Action within "getInitialProps". During my research, I came across a package named "next-redux-wrapper" that allows access to t ...

typescriptreduxnext.jsredux-thunkredux-toolkit

Display captions on react-player videos using an .srt file

Currently, I am working on a React/Typescript project with Next.js. A key feature of this project is a modal that utilizes 'react-player' to display videos. While the video and modal are functioning as intended, I am looking to incorporate capti ...

reactjstypescriptreact-playersrt

Navigating screen orientation changes in ReactJS

Currently, I am working on a component that needs to update its content based on the screen orientation (portrait/landscape). Here is my approach: var Message = React.createClass({ getInitialState: function() { return {isPortrait: true} } ...

reactjs

Highstock reverts to panning following a zoom operation

Greetings Highstock Community, I'm trying to figure out how to disable zooming so that a user can pan the graph again after zooming in using highstock tools. For example, referring to this highstock sample, here's what we want the user to do: Z ...

reactjshighchartsreact-highcharts

Is there a way for me to adjust the typography background based on its current status?

Is there a way to dynamically adjust the background color of text based on the status value? Currently, when the status is pending, the background color defaults to yellow. For example, if the status changes to complete, I want the background color to ch ...

javascriptreactjsmaterial-uimern

I'm currently facing an issue where the Ionic styles are not displaying correctly within my Next.js application

I'm currently experiencing a problem where Ionic styles are not being applied to certain pages in my Next.js app. Despite working on the home page, the Ionic styles do not seem to be taking effect on the profile page. Any guidance on troubleshooting t ...

ionic-frameworknext.js

How can I extract a value from an object that is readonly, using a formatted string as the key?

I encountered a situation where I have code resembling the following snippet. It involves an object called errorMessages and multiple fields. Each field corresponds to various error messages in the errorMessages object, but using a formatted string to retr ...

reactjstypescript

Optimizing the usage of override Button with Box component in Material-UI

Recently, I've been delving into the Box component in material-UI (https://material-ui.com/components/box/#box) and attempting to understand and write code for it. Specifically, I've been experimenting with overriding a Button component using th ...

reactjsmaterial-ui

Tips on displaying tooltip specifically for displaying x values only in React charts

Currently, I have a line chart that displays only four values, yet my datasets contain more data points. The issue is that the dot on the line is shown for all datasets. Is there a way to show the circle pointer only for x values that are displayed? https ...

reactjschart.jsreact-chartjs