I am very new to coding and react, for my React app I have an image carousel that was flickering when you click on the arrows (my img height is set to auto in order for it to be responsive, if I put set height the flickering stops). After some research I tried preloading the images in index.html, like this (in the header tag):
link rel="preload" as="image" href="/static/media/UntitledTEST1.016538a9.png"
I am storing images in src, 'image' folder and above link is what I'm getting in the app state.
It worked great and the images were transitioning smoothly, but it stopped working out of nowhere. The horrible flickering is back and this is the message in the console:
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
localhost/:1 The resource http://localhost:3000/static/media/TinScreenShot1.853b581e.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
I can't seem to find a solution for this, any help/input would be greatly appreciated!
Update: I realized for some bizarre reason and out of nowhere, part of the image number was chopped off in the index.html links, so the links were all wrong. The flickering is now fixed, but the resource URL error is still there.