Images are not loading in NextJs image component on a Digital Ocean deployed application

I recently encountered an issue with my NextJs project. While using the NextJs Image Component for images, everything worked perfectly fine when running locally. However, after deploying the project on Digital Ocean, all the images served through the Next-Image-Component stopped working.

The error message I received is a "Network Tab error" which you can view here.

Despite trying to import the images using both relative and absolute paths with module imports, nothing seems to fix the issue. Interestingly, when I deployed the same project on Vercel, all the images displayed correctly without any problems. My team prefers the project to be deployed on Digital Ocean, so I'm currently seeking a solution for this issue.

I have contacted the support team at Digital Ocean but have yet to receive a response after several days of waiting. It's worth noting that images served traditionally with the img tag or through the MUI avatar component are functioning properly.

If anyone has faced a similar problem or has any ideas on how to resolve this specific issue on Digital Ocean, please share your insights. Thank you!

javascriptnext.jsdigital-oceannextjs-image

Answer №1

If you're facing the same problem, I found a solution by incorporating the "sharp" package into my production app as suggested by NextJs here.

Vercel automatically handles the installation process, and it worked seamlessly on Vercel for me. Hopefully, this tip will assist others experiencing similar issues.

Answer №2

Setting up sharp package

npm install sharp

Following the instructions provided by @Craftsman worked perfectly for me

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

The GIPHY API object returns no results

Utilizing Angular 2 to fetch data from the GIPHY API. export class ListaGifsComponent { gifs : Object[] = []; urlBase = "http://api.giphy.com/v1/gifs/search?q="; termoPesquisado = "ryan+gosling"; key = "O8RhkTXfiSPmSCHosPAnhO70pdnHUiWn"; ...

javascriptangularapitypescriptgiphy

What is the best way to retrieve past data using RTK Query?

When working with data retrieval using a hook, my approach is as follows: const { data, isLoading } = useGetSomeDataQuery() The retrieved data is an array of items that each have their own unique id. To ensure the most up-to-date information, I implement ...

javascriptreactjsreact-reduxrtk-query

Guide to automatically update div with new table rows with the help of Ajax

Can you assist me in updating the div called "table" that contains a table fetching rows from the database? <div id="table"> <h1 id="Requests"> <table></table> </h1> </div> <button id="refresh-btn"&g ...

javascriptjqueryhtmlajax

What is the best way to arrange elements based on the numeric value of a data attribute?

Is there a way to arrange elements with the attribute data-percentage in ascending order, with the lowest value first, using JavaScript or jQuery? HTML: <div class="testWrapper"> <div class="test" data-percentage="30&qu ...

javascripthtmljquery

"X-Requested-With" header not being included in XMLHttpRequest request

After successfully using jQuery.ajax() to make an ajax call to an MVC action, I decided to switch to using the XMLHttpRequest along with the HTML5 File API due to some forms containing file controls. However, since making this change, the MVC action no lon ...

javascriptjqueryajaxhtml

Using Python to interact with forms and click JavaScript buttons

Is there a way to automate form filling on a website by setting specific parameters that will bring up products matching those parameters? I attempted to use mechanize in python, but it does not support javascript. It seems like the process of entering par ...

javascriptpythonseleniummechanizejython

The function res.sendFile() seems to be unresponsive

While building my server-side application using node.js, express, and request-promise, I encountered an issue with the res.sendFile() function in my server.js file. Despite including res.sendFile(__dirname + '/public/thanks.html'); within a .then ...

javascriptnode.jsexpress

Unraveling the mystery of NextJS dynamic routing with slugs

Hey there! I'm currently working on a project using Next.js and I could use some help. Here's how I've structured my site: pages [slug] index.jsx index.jsx In the slug/index file, I have the following code snippet: export async ...

reactjsnext.js

Dynamically add a plugin to jQuery during execution

After installing jQuery and a jQuery-Plugin via npm, I am facing the challenge of using it within an ES6 module. The issue arises from the fact that the plugin documentation only provides instructions for a global installation through the script tag, which ...

javascriptjquerynpmbootstrap-select

Getting data in a ng-Dialog Modal with AngularJS is a breeze!

Hi there, I'm new to Angular JS and facing an issue with displaying data from my MySQL database in a table as well as in a modal for more detailed information: I've included the HTML file named _detail_modal.html at the bottom of the page. ...

javascripthtmlangularjsng-dialog

Exploring jQuery's capabilities with Cross-Domain URLs

I created a basic index.php file with the following code: <!DOCTYPE html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/httpGet.js"></script> <script type ...

phpjavascriptjquerycross-domaincross-domain-policy

Struggling with getting render props to work in Next.js version 13

Looking to develop a custom component for Contentful's next 13 live preview feature in the app directory, I thought of creating a client component that can accept a data prop and ensure type safety by allowing a generic type to be passed down. Here is ...

reactjstypescriptnext.js

Is it possible to configure the Eclipse Javascript formatter to comply with JSLint standards?

I'm having trouble setting up the Eclipse Javascript formatting options to avoid generating markup that JSLint complains about, particularly with whitespace settings when the "tolerate sloppy whitespace" option is not enabled on JSLint. Is it possible ...

javascripteclipsecoding-stylejslint

Creating an interactive date selection feature with a calendar icon in MVC 5

I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the co ...

javascriptjqueryhtmlcssdatepicker

The postman does not retain any data

I am currently facing an issue where I am using Postman to enter a post into a MongoDB server, but the post returns empty. Even after checking my server, nothing has been entered and there are no errors displayed. Here is the route file: router.post(&apos ...

javascriptjsonmongodbpostman

Guide on adjusting shadow intensity with a Directional Light on a BoxGeometry in Three.js

I've been working on adjusting the light and shadow settings for Box Geometry. Specifically, I am using a Directional light with a certain intensity level. However, I've noticed that when I decrease the intensity, the plane appears darker while t ...

javascriptreactjsthree.jsreact-three-fiberreact-three-drei

What is the best way to implement slug before patName in next.js?

Currently, I am working with next.js and graphql. I am looking for a way to include the workspace name in the URL. localhost/[workspace slug]/memeber localhost/[workspace slug]/admin This is the format I am aiming for. Can anyone assist me with this? ...

reactjsnext.jsserver-side-rendering

Is there a way to link the id selector with the item's id?

In my app, I have a list of items with buttons that can be liked. To ensure uniqueness, I am utilizing the id selector. My goal is to use the item's id and connect it to the id selector for proper distinction. How can I retrieve the id of each item a ...

javascriptjquerydjangolistcss-selectors

What is the best way to retrieve a default property from a JavaScript literal object?

In the following example, a JS object is created: var obj = { key1 : {on:'value1', off:'value2'}, key2 : {on:'value3', off:'value4'} } Is there a clever method to automatically retrieve the default valu ...

javascriptpropertiesobject-literal

Component cannot be shown on the screen

<template> <div v-for="corpus in getCorpora" v-bind:key="corpus.id"> <Corpus v-bind="corpus" /> </div> </template> <script> import Corpus from "../components/Corpus"; impor ...

javascriptvue.js