Having an error while displaying the image from an API in Next JS

Question

I am having an error and am unable to fetch the image from the API and they are showing me an error although it works on img tag but when i replace the this with NextJS Image tag then it is showing me this error.

    import React, { useState, useEffect } from "react";
    import { useDispatch, useSelector } from "react-redux";
    import Image from 'next/image';
    
    const ChannelDetailCard = ({
      data,
      id,
      channel_image,
      channel_name,
    
    }) => {
    
      return (
        <>
            <div className="ml-0 flex justify-center lg:flex lg:ml-10">
              <Image
                className="w-64 h-64 object-cover rounded"
                src={channel_image}
                objectFit="contain"
                layout='fill'
              />
           </div>  
         </> 
             ) 
     }
    }

Here is the Error which i gets while running this code.(Sample)

Looks like ``channel_image`` is empty or doesn't contain a value. Check for that! — OMi Shah, Aug 18 '22 at 12:11
Actually it contains a value and previously i am using tag it works perfectly fines in it but when i replaced it with Next JS own Image Tag then it is showing me this error — Wasiq Ali, Aug 18 '22 at 12:13
any sample (example) value that the ``channel_image`` holds? — OMi Shah, Aug 18 '22 at 12:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247363/discussion-between-wasiq-ali-and-omi-shah). — Wasiq Ali, Aug 18 '22 at 12:43
Looks to me like the returned URL has a whitespace in it. Was there supposed to be an underscore or something? Have you tried logging the returned URL in the console? — Karthik Sivasubramaniam, Aug 18 '22 at 12:49
Oh, I do see your console log. It does appear to have a space, which would make the URL invalid, I believe. — Karthik Sivasubramaniam, Aug 18 '22 at 12:50

score 2 · Accepted Answer · answered Aug 18 '22 at 13:05

Since, you're loading images from external source, different domain than the current application domain, you need to explicitly add all the domains of the images that you're loading in the next.config.js file as mentioned here

Edit your next.config.js file and add:

module.exports = {
  images: {
    domains: ['example.domain.com'],
  },
}

Make sure to replace example.domain.com with the domain name of your image source. After saving reload and it should work.

Thankyou now it works fine by adding the above line – Wasiq Ali Aug 18 '22 at 13:12 — Wasiq Ali, Aug 18 '22 at 13:12

person zen · Answer 2 · 2022-08-18T18:13:37.187

1

in your nextjs config

u have to add the hostename of the website u bring images from
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ["********.com"],
},
};

module.exports = nextConfig;

if u have multiple origins, then u have to add them like this domains:["abc.com","xyz.com"]

edited Aug 18 '22 at 18:13

answered Aug 18 '22 at 11:49

person zen

91
1
4

please avoid commenting as an answer !!! – OMi Shah Aug 18 '22 at 11:54
i dont know all the rules here, but i gave a possible solution to the problem. – person zen Aug 18 '22 at 11:56
I have updated my post please check it – Wasiq Ali Aug 18 '22 at 12:08
are you sure all channel_image comes always with data? or some card doesnt have an src? – person zen Aug 18 '22 at 12:13
Yes it always comes up with image data, I am getting this error when I am using NextJS image tag otherwise it is working fine in tag – Wasiq Ali Aug 18 '22 at 12:17
in your nextjs config, add images: { domains: ["hostname"], } with hostname is the website url u bring from it the images – person zen Aug 18 '22 at 12:47
Thank you, Now it is working fine when I have added the above line in the config file. – Wasiq Ali Aug 18 '22 at 13:09

Having an error while displaying the image from an API in Next JS

2 Answers2