How can I fetch image from Strapi API V4

Question

How can I fetch image from my Strapi V4 API in NextJS. I have been trying it but is not working I don't know what was wrong. Actually I just want to get the url from rest API.

I have trid to fetch the image using useEffect, UseState.

`import { useState, useEffect } from 'react';
import Moment from 'moment';
import Link from 'next/link';
import { baseUrl } from '~/repositories/Repository';
import LazyLoad from 'react-lazyload';

useEffect(() => {
        initPost(post);
    }, [post]);

export default function useCustomPost() {
    
    const [thumbnail, setThumbnail] = useState(null);
    
        
    return {
     
        thumbnail,
        initPost: (post) => {
            let categoriesView, titleView;
if (post.thumbnail){
                //const endPoint = `api/${post.thumbnail[1].formats.thumbnail.url}?populate=*`;
                const thumbnailImage = ( 
                    <LazyLoad>
<img src=            {`http://localhost:1337/api/${post.thumbnail.thumbnail[1].formats.thumbnail.url}?populate=*`} alt="img" />
                    </LazyLoad>
                    );
                setThumbnail(thumbnailImage);
            }`

Answer 1

Instead of http://localhost:1337/api/${post.thumbnail.thumbnail[1].formats.thumbnail.url}?populate=* as the image src, just post.thumbnail.thumbnail[1].formats.thumbnail.url is likely sufficient.