React.js 项目本地图片突然停止加载答案

【问题标题】：React.js project local images suddenly stopped loadingReact.js 项目本地图片突然停止加载
【发布时间】：2020-11-01 22:41:33
【问题描述】：

所以我有一个 React.js 项目突然不加载本地图像（例如：本地主机上的src={require("../../assets/images/logo/logo-v4.png")}。正在显示来自外部 URL 的远程图像。看起来我的实时部署构建仍然正确加载图像，但我担心构建和部署我最近的更改以破坏我的实时构建，无论这个问题是什么。我尝试git checkout一个较旧的提交，我知道图像工作正常，但结帐也没有显示本地图像.

我已尝试删除node_modules、package-lock.json、npm cache clean --force，然后再次删除npm install，问题仍然存在。我已经重置了我的电脑。我已经在我的 PC 上运行了其他 React.js 项目，并且本地图像加载得很好，所以它只适用于这个特定的项目。

不知道这是怎么发生的，或者接下来要尝试什么来解决这个问题。这有发生在其他人身上吗？我还能尝试什么来解决这个问题？如果您希望我分享更多代码，请告诉我。谢谢！

package.json：

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3000/",
  "dependencies": {
    "chart.js": "^2.9.4",
    "eslint-plugin-flowtype": "^3.13.0",
    "firebase": "^7.24.0",
    "firebase-admin": "^9.3.0",
    "firebase-functions": "^3.11.0",
    "firebase-tools": "^8.14.1",
    "formik": "^2.2.1",
    "history": "^4.10.1",
    "npm": "^7.0.7",
    "react": "^16.14.0",
    "react-animated-burgers": "^1.2.8",
    "react-animated-slider": "^1.1.4",
    "react-burger-menu": "^2.9.0",
    "react-datez": "^1.4.1",
    "react-dom": "^16.14.0",
    "react-firebase-file-uploader": "^2.4.3",
    "react-flexbox-grid": "^2.1.2",
    "react-ga": "^2.5.7",
    "react-icons": "^3.11.0",
    "react-modal": "^3.11.2",
    "react-pdf": "^5.0.0",
    "react-quill": "^1.3.5",
    "react-responsive": "^6.1.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-toastify": "^5.1.0",
    "recharts": "^1.5.0",
    "typescript": "^3.9.7",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

我在调试版本中遇到过几次这种情况，但在发布版本中效果很好。你能测试一下吗？
另外，你可以看到这个stackoverflow.com/questions/34582405/…
正确，这就是我所说的，它似乎仍然适用于我的实时部署构建，但链接的主要答案只是使用require()，但这不是这里的问题。您在该链接中还有其他内容吗？

标签： reactjs npm webpack

【解决方案1】：

只需使用普通导入import logo from '../../assets/images/logo/logo-v4.png' 就可以了。由于某些原因，require 将图像作为模块导入。

【讨论】：

【解决方案2】：

好的，所以我今天进行了故障排除并将问题范围缩小到将react-scripts 更新到最新版本 v4.0.0，因此我降级到 v3.4.4，并且本地图像正确加载。我将在 react-scripts GitHub 页面上打开一个问题！

【讨论】：