Search code examples
reactjsionic-frameworkionic5ionic-reactionic6

Can't resolve image while using it via css background image? Not being able to use anything from assets in Ionic?

I'm trying to load an image in one of my components and for this, I created one sample app using the following command:

 ionic start yp-patient-app sidemenu --type=react --capacitor

After completion, I moved to one of the component and tried to use a pre-existing image via:

.container {
    background-image: url("./assets/shapes.svg");
}

But it failed with an error and I'm not being able to use that file, I tried all the other combinations related to relative path like ../assets or shapes.svg, /assets/shapes:

[react-scripts] Error: Can't resolve './assets/shapes.svg' in 'C:\Users\Ashish Bairwa\Desktop\temp\yp-patient-app\src\pages'

enter image description here

Here is my package.json preview:

{
  "name": "yp-patient-app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/app": "1.0.7",
    "@capacitor/core": "3.3.3",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@ionic/react": "^6.0.0",
    "@ionic/react-router": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "ionicons": "^5.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3"
  },
  "description": "An Ionic project"
}
Solution

  • This problem seems to be related to a react-scripts version that comes with ionic. The latest version no longer looks into the public folder for assets. Instead, it expects you to make a folder outside the public. If you want to pick assets from the public then revert react scripts to 3.4.1