通过 css 背景图片使用时无法解析图片？无法使用 Ionic 资产中的任何内容？

Question

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

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

Answer 1

这个问题好像和ionic自带的react-scripts版本有关。最新版本不再查看资产的 public 文件夹。相反，它希望您在 public 之外创建一个文件夹。如果您想从 public 中选择资产，则将 React 脚本还原为 3.4.1

通过 css 背景图片使用时无法解析图片？无法使用 Ionic 资产中的任何内容？

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

reactjs

ionic-framework

ionic-react

ionic5

ionic6