Next.js Discord

Discord Forum

Best way to fetch images without exposing the backend URL

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Hey, I have an external backend which provides me some images, and I need that images
The code related : 
              {comments.length > 0 && (
                <div className="flex flex-col justify-center items-end w-full absolute z-20 top-20">
                  <div className="flex flex-col text-right mr-4 w-52 h-64 mt-11">
                    <div className="flex flex-row-reverse items-center">
                      <Image
                        src={comments[currentIndex].image ? comments[currentIndex].image : "/Image (1).png"}
                        width={48}
                        height={48}
                        alt="Customer"
                        className="bg-white w-12 h-12 rounded-full"
                      />
                      <p className="text-xl font-semibold mr-2 text-s65">{comments[currentIndex].Name}</p>
                    </div>
                    <p className="text-xl text-s65 leading-relaxed">
                      {comments[currentIndex].text}
                    </p>
                  </div>
                </div>
              )}

Now that image is not working : http://localhost:3001/_next/image?url=%2Fmedia%2FcustomerComment%2Fout_0.jpg&w=96&q=75
400 Bad Request



And idk what is the best way to do this
I'd appreciate any tips about this
Answered by B33fb0n3
@Australian Freshwater Crocodile now I got your issue. You don't want to expose your server ip. You can use a service like cloudflare that proxies all the requests to your server. Like that the user see's only "cdn.yourdomain.com" or something, but your server can still serve the images.

You backend then returns new links:
- http://ip/media/customerComment/out_0.jpg
+ http://cdn.domain.com/media/customerComment/out_0.jpg
View full answer

21 Replies

Australian Freshwater CrocodileOP
  
  useEffect(() => {
    const fetchComments = async () => {
      const response = await getCustomerComments();
      setComments(response.data);
    };
    fetchComments();
  }, []);

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % comments.length);
  };

  const handlePrev = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + comments.length) % comments.length);
  };

This is the part for setting the comments
B33fb0n3
And are you able to download it? (Copy paste the url into new tab)
@B33fb0n3 And are you able to download it? (Copy paste the url into new tab)
Australian Freshwater CrocodileOP
Yes I can
@Australian Freshwater Crocodile Yes I can
B33fb0n3
then I didn't got your issue. Can you clarify it a bit more
@B33fb0n3 then I didn't got your issue. Can you clarify it a bit more
Australian Freshwater CrocodileOP
We get the comments from http://ip/main/CustomerComment
(frontend and backend are in the same server)
For showing the image, http://ip/media/customerComment/out_0.jpg
I need to do this
And import backend url and do something like this : {backend_url}/media/customerComment/{comment_id}.jpg
But I don't want to directly expose my backend IP directly on the image
@Australian Freshwater Crocodile We get the comments from http://ip/main/CustomerComment
Australian Freshwater CrocodileOP
This function runs in a "use server" file in backend so I don't think it gets exposed but for showing the Image I guess it will expose the IP
Idk If I was able to clarify it enough
or maybe I got it wrong
B33fb0n3
@Australian Freshwater Crocodile now I got your issue. You don't want to expose your server ip. You can use a service like cloudflare that proxies all the requests to your server. Like that the user see's only "cdn.yourdomain.com" or something, but your server can still serve the images.

You backend then returns new links:
- http://ip/media/customerComment/out_0.jpg
+ http://cdn.domain.com/media/customerComment/out_0.jpg
Answer
or is the API on another server?
B33fb0n3
@Australian Freshwater Crocodile solved?
@B33fb0n3 <@442728361970892801> solved?
Australian Freshwater CrocodileOP
Yeah cdn is a good idea
B33fb0n3