I am wrapping my already built web-app using reactjs and create-react-app with cordova to make mobile app. I am having issue with static images on my page. One image is showing on app while the others are not showing. On browser everything is working properly.
There are 2 approaches which I have tried.
- I have my images folder inside src directory which has all the images. I am importing the image as
import img from ...(relative path of image) and then using it asimg src={img} /. When I will doconsole.log(img), it will show the path of image file inside build folder like this -./static/media/img_name.extension. Now I donpm buildwhich creates the whole build (static folder) insidewwwfolder of cordova directory.(as I have done this line in package.json"build-js": "react-scripts build", "build": "npm-run-all build-css build-js && cp -a ./build/. ../cordova/www/",) .Then finally I docordova build androidwhich creates the wholestaticfolder of build insideplatforms/android/assets/www/static. Inside static we have media folder which has all the images. Now I am attaching two images of chrome:inspect which will show that both the img tags (1) and (3) have same path style but (1) is showing while (2) is not. Here is the link :
![Elements]:(https://imgur.com/a/qCtygxp) ![sources]: (https://imgur.com/a/qCtygxp)
The second link is showing the snapshot of file structure as shown is sources while inspecting on chrome. So there is folder static which has another folder media. This contains the first image which is showing. The rest which are not showing are coming inside static/media. I don't know how and why this is happening.
- The second thing which I tried is put the images inside
public. I made images folder and put the images there. And then in img tag I did like this<img src="/images/diversity_1.png". This is working on web browser but not on cordova app. Although while inspecting there is an image folder there which has that image. Also in elements as on first link marked as (2) we can see that path is pointing correctly.
Last thing I want to mention is I have added this line in package.json "homepage": "./"
Hope I have explained my problem clearly. Let me know if more clarification is needed.