Getting Image from api-CodePudding

I have an api "https://www.pinkvilla.com/photo-gallery-feed-page/page/1" which returns response something like this.

"nodes": [
{
"node": {
"title": "PHOTOS: Shruti Haasan's Turkey vacay- A perfect mix of work and fun",
"nid_dont_use": "1",
"field_photo_image_section": "/files/styles/photogallery/public/shruti_haasan_in_turkey_main_0.jpeg?itok=ex_mE-AH",
"path": "/photos/shruti-haasan/photos-shruti-haasans-turkey-vacay-perfect-mix-work-and-fun-1184120",
"nid": "1184120",
"photo_image_nids": "1184114,1184115,1184116,1184117,1184118,1184119",
"ImageStyle_thumbnail": "/files/styles/imagestyle_1_1/public/shruti_haasan_in_turkey_main_0.jpeg?itok=44jwEbFY",
"last_update": "1661754431",
"views_count": "305",
"author_uid": "870656",
"author_name": "Pinkvilla Desk"
}
},

I am trying to get images from this api and I see two objects which have image path in it.

"ImageStyle_thumbnail": "/files/styles/imagestyle_1_1/public/shruti_haasan_in_turkey_main_0.jpeg?itok=44jwEbFY"
"field_photo_image_section": "/files/styles/photogallery/public/shruti_haasan_in_turkey_main_0.jpeg?itok=ex_mE-AH",

Is there any way I can get images from this api?

CodePudding user response：

It seems like the pictures you're searching for can be composed by adding your API image url's to pinkvilla base url: https://www.pinkvilla.com/files/styles/photogallery/public/shruti_haasan_in_turkey_main_0.jpeg?itok=ex_mE-AH

You could try composing pinkvilla's base url with paths returned from your API, but it won't be a failsafe approach, as you can't possibly know if those images actually exists on pinkvilla's webserver.

CodePudding user response：

You could do something like this to get the image urls:

const [imageUrls, setImageUrls] = useState();
     
const fetchImages = async () => {
        const baseUrl = "https://www.pinkvilla.com";
        const result = await fetch(`${baseUrl}/photo-gallery-feed-page/page/1`).then((res) => res.json());
        setImageUrls(result.nodes.map((node) => `${baseUrl}${node.node.field_photo_image_section}`));
      };

fetchImages();

And then can use that array of urls to render the images using the <img /> tag