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.

Answer 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.