[FIXED] How to deploy react images inside a wordpress plugin?

Issue

I developed some small wordpress plugin in react. The react app is using some images inside the project. When i deployed the react app the URL of the images (assets) becomes automatically

wordpress.local/static/media/ArrowLeft.529a61df.svg

which cannot be found in the wordpress project. (I didn't forget to import the images)

I know i can upload the images in wordpress and copy the media folder path into my local react project but then i won't see the images in my react app. Any workarounds to do it this way and display the images inside the local react app seems to be too dirty for me.

I am including the image in react like this:

import ArrowLeft from "../media/arrowleft.svg"

and use it like that:

<img src={ArrowLeft} alt='arrow-left' className='arrow-left'/>

So is there a way to include the images this way and make them appear in wordpress right after importing the react code with images? If not, any ideas what would be a good way of achieving the images being displayed in wordpress?

Solution

The solusion here was simplier than i thought.. wordpress is simply not supporting SVG images by itself. Converting the images to PNG solved the issue.

Answered By - Keczup

Answer Checked By - David Goodson (PHPFixing Volunteer)