The next/image component is not able to display images loaded from an external URL

When attempting to fetch images from a CDN, an error stating "hostname **** is not configured under images in your next.config.js" was encountered. Despite following the configuration guidelines provided on the official Next website, the issue persists.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

The current version of Next being used is 12.3.1. How can I resolve this issue and successfully retrieve the desired image?

javascriptnext.js

Answer №1

To cover every path of a domain, you can simply use the domains option instead of remotePatterns.

Include the domains in your next.config.js like this:

// next.config.js
module.exports = {
    images: {
        domains: ["assets.example.com"]
    }
}

If your code snippet is not working, make sure you have restarted the server after modifying the next.config.js file. Remember to stop the server and run npm run dev each time you make changes to see them take effect.

Answer №2

The issue was resolved by clearing the image domains in the backend code

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

Child Component NextJS Server Side Rendering

I am currently utilizing next js in order to achieve SSR for a page rendered by this component. The issue at hand is that I have a component named which gets rendered by iterating through results from the API. However, the content generated by this compon ...

reactjsnext.js

Switching the angularjs variable from html; a definitive guide

How can I update a variable in an AngularJS controller using JavaScript when a specific HTML element is clicked? For instance: angular.module('app',[]) .controller('appController', function($scope, $http){ $scope.on ...

javascripthtmlangularjs

Whenever I examine the search results data using console.log, errors tend to occur

https://i.sstatic.net/zhxdm.png This is the unique Search code snippet that I have created, import Footer from "../components/footer/Footer"; import Header from "../components/header/Header"; import { useRouter } from "next/dist/c ...

reactjsnext.jsformatreact-props

Executing a function before changing routes and then changing the route once the function is completed

I am curious about how to call a function when clicking on: <Link to="/">page</Link> and invoke a function before the route changes. For example, When I am in component A and click on a link to go to Component B, I want to trigger a JavaScr ...

javascriptreactjsreact-router

Utilizing Jquery to wrap HTML content with div elements within a secure Content Management System

Despite my best efforts, I have hit a roadblock and need some help. I want to utilize Javascript/Jquery within this restrictive cms to wrap two lists in their own div. Take a look at the current code snippet below. Unfortunately, the closed cms is set in ...

javascriptjqueryreplace

Capture data from Ajax requests and store them in PHP variables

When setting up a DDBB Insert using $.ajax, I encountered an issue. $(document).on('click','.submitMessage', function(){ content=$('textarea').val(); img=$('#messageImg').val(); stdMsg=$('.ms_stdMsg ...

javascriptphpjqueryajax

Receiving the error message "Encountered issue reading property of 0" while attempting to retrieve a specific element from an array

Currently, I am facing an issue where I am trying to access a value that is set in one function within another function. When I attempt to return this value at the end, the console.log displays the value correctly. However, when I try to set it, I receive ...

javascriptexpress

I am unable to store rich text fields using LocalStorage

My goal is to store form data in localStorage, but I'm facing an issue with rich text fields not saving their data. Regular HTML fields like textboxes work fine. In my Razor markup for the field (using MVC), here is an example: <div class="form-g ...

javascriptlocal-storagesummernote

"Discover the process of transforming HTML, CSS, and script files into a cohesive JavaScript format

I have developed a unique web chat widget from scratch using HTML, CSS, JavaScript, and AJAX calls. Now, my goal is to convert it into a script that can be easily embedded in any other websites or webpages. Similar to how third-party widgets work, users sh ...

javascript

Understanding the process of configuring Quasar Language in SSR Mode using route parameters

Is there a way to incorporate Quasar Language Packs while utilizing this specific routing method and SSR mode? const routes = [ { path: '/:locale?', beforeEnter: localeNavGuard, children: [ ... ] } ] ...

javascriptvue.jsinternationalizationserver-side-renderingquasar-framework

Executing empty arguments with `execute_script` in Selenium with Firefox

I need help setting the value of a textarea using JavaScript instead of the send_keys() method. According to the documentation, I should be able to pass a webelement to execute_script as a parameter and refer to this parameter using the arguments array. H ...

javascriptpythonfirefoxseleniumselenium-webdriver

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

The mousedown event handler in Three.js disrupts the focus on the input field

Here is a line of code in threejs: document.addEventListener('mousedown', onDocumentMouseDown, false); This particular code snippet causes the input field to lose focus when clicked. This can be problematic, for instance, when there is a canva ...

javascriptjquerythree.js

Exporting JSON blend files in Three.js is causing an error that says "Cannot read property 'type' of undefined."

Trying to display the default 3D cube template from Blender v2.74 in Chrome browser, I exported it as json using the threejs v1.4.0 add-on and I'm using Three.js revision 71. Referencing the documentation at , I attempted to load this json model stor ...

javascriptjson3dthree.jsblender

What is the best way to manage uncaught errors within the simple-peer library?

Currently integrating feross' simple-peer library and encountering an occasional error: Uncaught Error: Ice connection failed. at r._onIceStateChange at RTCPeerConnection.t._pc.oniceconnectionstatechange This error is directly from the library and ...

javascriptnode.jserror-handling

Getting the height of a div in a Nuxt.js application results in an error alert being displayed

Trying to retrieve the height of a div within a grid in a Nuxt application. <template> <div class="grid grid-cols-3"> <client-only> <Item v-for="( item, itemIndex ) in ItemsArray" ...

javascriptvue.jsnuxt.js

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

javascripthtmlvue.jsvuejs2

Check each field in a loop and if validation for any field fails, then return false using jQuery

Having trouble resetting the flag variables when it comes to form validations. I seem to be missing something crucial. I'm dealing with a form that has multiple text fields. I want to validate each field on blur and prevent form submission if any val ...

javascriptjquery

The Bootstrap 4 Accordion feature ensures a smooth scrolling experience without jumping to the

Are you in need of assistance? If so, I have developed a Javascript code that enables an accordion card to scroll to the top when clicked on to expand. Provided below is an example of a Bootstrap 4 accordion along with the associated Javascript snippet: ...

javascriptjquerybootstrap-4