Our pure JavaScript Scheduler component


Post by sukuna k »

We have declared the image path in the resourceImagePath prop and added the image to the resources object. However, the resources images are not rendering on the resources timeline. Kindly assist on this.
Kindly refer the attached screenshot for your reference.

Path declared in resourceimagepath prop
Path declared in resourceimagepath prop
Path declared (2).png (64.87 KiB) Viewed 205 times
Image name in Resources
Image name in Resources
Resources (2).png (17.34 KiB) Viewed 205 times
Images are not rendering
Images are not rendering
Images are not rendering.png (35.98 KiB) Viewed 205 times

Post by saki »

There are several things to check:

  1. Take a look at Animations React demo. resourceImagePath : 'users/' is configured there.
  2. Make sure that your images are copied in the correct folder - normally it should be a subfolder of public.
  3. In some React apps you cannot traverse up with ../something/
  4. Check also resourceImageExtension - it should be empty string in your case.
  5. You can check in Network tab where the app is trying to load images from and correct potential wrong paths:
Screenshot 2024-06-24 at 14.42.41.png
Screenshot 2024-06-24 at 14.42.41.png (146.18 KiB) Viewed 201 times

Post by sukuna k »

Have attached a snapshot of the folder path and the mentioned path for verification.
Kindly verify once whether I have mentioned the correct path in the resourceImagePath prop.
Eventhough I have not received the images in the resource timeline view. Kindly help on this.

Folder path images are in the extension .jpg
Folder path images are in the extension .jpg
Image Folder path .png (36.22 KiB) Viewed 176 times
Path declared in the code
Path declared in the code
Image Path declared.png (34.89 KiB) Viewed 176 times

Post by ghulam.ghous »

Hi Sukuna,

Thanks for providing the details. As Saki mentioned above:

1. Take a look at Animations React demo. resourceImagePath : 'users/' is configured there.

  1. Make sure that your images are copied in the correct folder - normally it should be a subfolder of public.
  2. In some React apps you cannot traverse up with ../something/

So that is what happening in your case. Please copy your images folder to public folder and set the correct path there.

It will be something like this:

resourceImagePath : 'images/'

I have made a small demo showing that in action. Please check this:

basic.zip
(3.55 MiB) Downloaded 3 times
Screenshot 2024-06-25 at 11.36.00 AM.png
Screenshot 2024-06-25 at 11.36.00 AM.png (226.61 KiB) Viewed 167 times

Hope this helps!

Regards,
Ghous


Post by prasath »

Hi Ghulam,
Right now our component setup is not a react app.Its basically a storybook setup which has no public folder or directory.As suggested by you and sagi,We have created a folder named images in our setup and tried importing the path using resourceImagePath
prop.Still we are not able to get over it.We are not able to proceed further on this and need your help to proceed further.Attaching the screenshots for further clarity.

usage pf
usage pf
Usage of props.png (81.3 KiB) Viewed 145 times
image prop in resource data
image prop in resource data
image prop given in resouce data.png (24.68 KiB) Viewed 145 times
Error when request
Error when request
Request error.png (54.73 KiB) Viewed 145 times

Post by ghulam.ghous »

Hi,

Can you please try sharing a small runnable test case with us so we can see where you can place your static resources in storybook? I was looking at the following link which shows how you can use static images etc inside storybook. https://storybook.js.org/docs/configure/images-and-assets. Maybe look at this and try it. There should be place in storybook from where you can serve your images just like we have /public in react and /assets in angular. Please also check this stackoverflow thread. https://stackoverflow.com/questions/58267903/serving-static-files-in-storybook-js. Best you should provide us with a small test so we can debug and assist you.

Regards,
Ghous


Post by prasath »

Hi Ghulam,
Placing the static images in public folder and accessing the images from there is fine.But what will happen if images are rendered from an api response and how we can handle at that point of time.For ex: extracting a bunch of profiles of employees to display in resource timeline.Provide your thoughts on this.


Post by prasath »

Hi Ghulam,
How we can handle with resourceimagepath prop if images are rendered from an api response and how we can handle at that point of time.For ex: Taking a list of images of employees to display in resource timeline.Provide your thoughts on this.


Post by alex.l »

Hi prasath,

Is it abstract question or it's in a context of solution you shared with us previously? What do you mean by "rendered from an api"? Are we talking about absolute path to an image or something else?
Did you fix the initial problem you asked about?

All the best,
Alex


Post by prasath »

Hi Alex,
Initial problem we discussed was fixed by adding the public folder and placing the static images there.But instant thought i had was whether we can handle the dynamic images which can be received from either an api response or from some other resources.Hope my point was clear.


Post Reply