I am trying to import image paths and store them into the redux store.
I noticed that when importing images, it seems to randomly import either the path to that image, or the base64 data.
can someone explain whats causing this behaviour, and how to make it only import the image path ( like img_1 and img_2 )
You should check the file size, if file size greater than 8192 bytes, then it will be imported as path, otherwise webpack will encode it.
References:
Is it always images 3 and 4 that are base64? If so, it is likely they are base64 encoded files, but named task-manager-3.png and task-manager-4.png. Least that would be my first thought. Hard to say with the info at hand.
If using linux try file task-manager-3.png and compare it's output to file task-manager-1.png. If the first reports something like:
myfile.png: ASCII text, with very long lines
The it is more likely an image that has been base64 encoded and save with a PNG extension. A PNG file should return something like:
filename.png: PNG image data, 1731 x 458, 8-bit/color RGBA, non-interlaced
To decode the base64 encoded file back to an actual PNG, you could use an online decoder such as https://www.base64decode.net/base64-image-decoder