How to fix "Failed to load resource: net::ERR_FILE_NOT_FOUND" for static images on cordova app using Reactjs and create-react-app

Question

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.

1. 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 as img src={img} /. When I will do console.log(img), it will show the path of image file inside build folder like this - ./static/media/img_name.extension. Now I do npm build which creates the whole build (static folder) inside www folder 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 do cordova build android which creates the whole static folder of build inside platforms/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.

2. 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.

Answer 1

I had to add "homepage": "." (without the /) to package.json for android to load the files.

Also I have used this guide:

https://github.com/sriramrudraraju/create-react-app-and-cordova/wiki/Creating-Structure-for-Create-react-app-and-Cordova#installation