0

我正在尝试在我的一个组件中加载图像,为此,我使用以下命令创建了一个示例应用程序:

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

完成后,我移至其中一个组件并尝试通过以下方式使用预先存在的图像:

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

但它因错误而失败,我无法使用该文件,我尝试了与相对路径相关的所有其他组合,例如../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'

在此处输入图像描述

这是我的 package.json 预览:

{
  "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"
}
4

1 回答 1

0

这个问题似乎与 ionic 附带的 react-scripts 版本有关。最新版本不再查看资产的公用文件夹。相反,它希望您在公众之外创建一个文件夹。如果你想从公众中挑选资产,那么将反应脚本恢复到 3.4.1

于 2022-01-08T05:59:10.377 回答