What is causing this error to appear in Next.js? The <link rel=preload> is showing an invalid value for `imagesrcset`

I've got a carousel displaying images:

<Image
  src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
  className={styles.carouselImage}
  layout="responsive"
  width={865}
  height={513}
  key={`${props[organizationId].events[programId].imgId}`}
  priority={true}
/>

The src for all images seems to be set correctly since they are visible and rendered. But there seems to be an issue, what could it be?

When checking the console, I see this error message:

has an invalid `imagesrcset` value
javascriptcssnext.js

Answer №1

A issue has been reported to Safari, which appears to be unique to that browser.

I recommend disregarding this error as it seems to be isolated.

Update: The problem has been resolved.

Answer №2

Make sure to include the following code snippet in your next.config.js file

module.exports = {
  images: {
    domains: ["amazonaws.com"],
  },
}

If you're curious, check out the details in the official documentation:

To allow Image Optimization for external image URLs, provide an absolute URL for the Image source and specify which domains are permitted to undergo optimization. This step is crucial in preventing any potential abuse of external URLs.

Answer №3

for local images, first you have to import them and then use

import catImg from '../public/cat.png'

<div>
<Image src={catImg} />
</div>

Answer №4

My experience was influenced by the presence of priority = {true}. As soon as I eliminated priority, the error message vanished.

Answer №5

Encountered an issue with Safari not supporting the lookbehind regex pattern. Made a workaround by changing (?=) to (?:) and switching from .match to .exec in order to access the matching groups.

It appears that there has been an update in webkit, more information here: https://github.com/WebKit/WebKit/pull/7109

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

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the cod ...

javascriptnode.jstypescriptwebpack

Mastering the art of positioning images using CSS and HTML in email marketing

Currently in the midst of designing an email template for a new project. I have set up a table, with one row featuring some stripes and the next row showcasing a black bar to match the site's layout. My question is: Is there a way to incorporate an i ...

htmlcssoutlookgmail

Incorporate the list seamlessly into the remaining content of the page

https://i.sstatic.net/lIsnd.png https://i.sstatic.net/Nftto.png I am currently developing a Vue component that utilizes an API call to search for a list of cities based on user input. My challenge is ensuring that the displayed list does not overlap with ...

htmlcssvue.js

Using AngularJS to connect components with expressions

Below is my component definition: .component('paging', { templateUrl: "feature/todo-feature/paging/paging.html", controller: "PagingController", bindings: { "data": "<" } ...

javascriptangularjscomponents

Are there any find all functions available in JavaScript that are built-in?

I frequently work with arrays in JavaScript, and I am facing an issue with the function .find() as it only returns the first occurrence. I need a way to get all occurrences if there are multiple. Below is my code: const condition = [ { info_p ...

javascriptarraysnode.js

Executing a custom hook/function when Next.js starts running

When initiating a Next.js project, I have a specific need to include console logs. However, I have been unable to find a suitable method for accomplishing this task. Can anyone provide a solution? ...

next.js

The window:beforeunload event in IE 11 always triggers the unsaved changes dialogue box

When it comes to adding a listener for the beforeunload event on the global window object, IE 11 behaves differently compared to Chrome and Firefox. This is particularly noticeable when using Angular's "ngForm" module. If a form is dirty and has not ...

javascriptangularformscross-browserinternet-explorer-11

Exploring additional parameters within express.js

I'm currently working on creating an email sender that includes all necessary components such as 'from', 'to', 'subject', 'textBody', etc. However, I am facing a challenge in setting optional parameters in expre ...

javascriptnode.jsexpressemailnodemailer

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

htmlcssfacebook

Generate a collection of div elements as child nodes

I'm working on a project where I have multiple rows with input fields. My goal is to create an array for each row that contains the values of the inputs. For example, if I have 3 rows and the values of 'input1' are 1, 'input2' are ...

javascriptjqueryhtmlarrays

Do AngularJS applications function similarly to windows?

Do AngularJS apps behave like windows? And is it possible to add an event listener to them? I am currently working on a proof of concept to see if an Angular app can communicate with a server without impacting the host. One potential solution I have thou ...

javascriptangularjsiframe

What is the best way to sort through an array using JavaScript?

Here's an array for you: values = ["10%", 1000, "5%", 2000] I'm looking to split this into two separate arrays like so: percentages = ["10%","5%"] numbers = [1000,2000] How can I achieve this using JavaSc ...

javascriptarraysfilter

The URL redirect is malfunctioning and prompting an error stating "No 'Access-Control-Allow-Origin' header"

Having trouble sending an Ajax request to a Node.js server from my application and encountering the following error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the ...

javascriptnode.jsajaxexpress

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...

cssmaterial-designhtmlmaterial-design-lite

When using res.render to send results, redundant lines are displayed

I feel like I must be missing something really obvious, but for the life of me I cannot figure out what it is. All I want to do is list the documents in a MongoDB collection in a straightforward manner. I am working with nodejs, mongoose, and Jade (althoug ...

javascriptnode.jsexpresspug

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

I am working on an application that utilizes Rails 4.1 and Ruby 2.1.2. The show.html.erb view for the Assignment Model in this application is as follows: <h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.so ...

javascriptjqueryruby-on-railscoffeescript

Identifying when several asynchronous JavaScript $.ajax requests have finished

I have a JavaScript function that runs a loop and makes asynchronous AJAX calls. I need to wait for all the AJAX calls to complete before updating the UI. Here is the loop: function sync_SyncLocalStorageToServer() { if (helper_IsAppOnline()) { ...

javascriptjqueryajaxasynchronous

Showing data from a MySql database using an HTML table

I am currently working on a pop-up form that captures user data and stores it in a MySQL phpmyadmin table. My goal is to have this data displayed in an HTML table once the popup form is closed. After submitting the form, I am redirected back to the homepag ...

javascriptphpjqueryhtmlmysql

Retrieve the values of two inputs from outside of the event

How can I access the values of two input fields in order to perform calculations as soon as their values are updated? <script> // Accessing the values of the two input fields for immediate calculation based on user input const heightInputEl = docum ...

javascriptinputevent-handling