Getting errors in console in Nextjs while using images from Unsplash

Question

I am using Unsplash images in my Nextjs App. Images are loaded and showing in the app but I am getting these errors and warnings. The way I am using images I just copy the image address from Unsplash and paste the URL in the src attribute.

Here is the next.config.js file:

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

const nextConfig = {
  reactStrictMode: true,
  distDir: "build",
  images: {
    domains: ["images.unsplash.com", "cdn.pixabay.com", "images.pexel.com"],
  },
};

module.exports = nextConfig;

Console error:

Network Tab error:

Note: I have also edited the next.config.js file.

Could you show the edited file?

Ilijanovic
– Ilijanovic

2022-05-18 09:51:29 +00:00
Commented May 18, 2022 at 9:51 — Ilijanovic
– Ilijanovic, Commented May 18, 2022 at 9:51
I added the config file

Mehdi Saqlen
– Mehdi Saqlen

2022-05-18 10:00:36 +00:00
Commented May 18, 2022 at 10:00 — Mehdi Saqlen
– Mehdi Saqlen, Commented May 18, 2022 at 10:00

Cendenta · Accepted Answer · 2022-05-31 17:08:36Z

1

Viewing a photo on Unsplash shows a URL of the format https://unsplash.com/photos/{id}.

Update your next.config.js to use the domain source.unsplash.com instead of images.unsplash.com, and then use http://source.unsplash.com/{id} in your src attribute. The image should then render as expected.

answered May 31, 2022 at 17:08

Cendenta

1692 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting errors in console in Nextjs while using images from Unsplash

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related