In my project, the user can change the avatar (profile image). The current photo loads without any errors, but when the user changes the avatar with an AJAX request, the new avatar is returned from the back-end and stored in Redux. Redux subscribes to my component and the new image should be displayed. Instead, I get a not found error. This is due to the short delay required to load the new avatar.
With this explanation, you know that it is not possible to import photo at the top of the file. (Although if possible, I prefer not to use this method.)
I know that if the images file is moved to the public folder, there is no need to use require and this can be a solution, but if there is a way to solve this error without moving the photos to the public folder, I prefer it.
Is there a way to:
- Can I find out if the load of the new photo is complete or not?
- Can I use a default photo until the new photo load is complete?
Of course, if I find a suitable answer to the first question, then the second question has been answered in some way. I tried to do this using require().default but I don't understand how it works? When I add .default to require, not displayed any picture (current and new avatar).
profileInfo.img?
<img id="prfHdrImg" src={require(`../assets/img/${profileInfo.img}`)}/>:
<i id="prfHdrImg" className="BGI-user"></i>